开关 Switch

基本

  1. <za-cell>
  2. <za-switch slot="description" v-model="switch1" @change="handleChange">
  3. </za-switch>
  4. 普通
  5. </za-cell>
  6. <za-cell>
  7. <za-switch slot="description" defaultChecked></za-switch>
  8. 默认开
  9. </za-cell>
  10. <za-cell>
  11. <za-switch slot="description" disabled></za-switch>
  12. 禁用的开关(默认关)
  13. </za-cell>
  14. <za-cell>
  15. <za-switch slot="description" disabled defaultChecked></za-switch>
  16. 禁用的开关(默认开)
  17. </za-cell>

Vue Script

  1. <script name="vue">
  2. export default {
  3. data() {
  4. return {
  5. switch1: false,
  6. }
  7. },
  8. methods: {
  9. handleChange(checked){
  10. console.log(checked);
  11. }
  12. }
  13. };
  14. </script>

API

Switch Attributes

属性类型默认值可选值/参数说明
default-checkedbooleanfalse-初始值
v-modelbooleanfalse-
disabledbooleanfalse-是否禁用

Switch Event

事件名称说明回调参数
change绑定值改变时的事件event.target.checked

Switch 开关 - 图1