Switch 滑动开关

用来打开或关闭选项。

基本用法

<quark-switch 
  :active="true"
>
</quark-switch>

加上 .sync 可实现数据的“双向绑定”。

<quark-switch 
  :active.sync="swActive"
>
</quark-switch>

export default {
  data() {
    return {
      swActive: true
    };
  }
};

自定义尺寸

内置 small，base，large 三种规格供使用。

<quark-switch 
  :active="true" 
  size="small"
>
<quark-switch 
  :active="true" 
  size="base"
>
<quark-switch 
  :active="true" 
  size="large"
>

change事件

<quark-switch 
  @change="onChange"
>
</quark-switch>

export default {
  methods: {
    onChange(status) {
      alert(status);
    }
  }
};

禁用状态

<quark-switch 
  :disabled="true"
>
</quark-switch>

禁用状态下，change事件参数永远为初始值

自定义Class

<quark-switch 
  :active="true"  
  class="my-switch"
>
</quark-switch>

Prop

| 字段 | 说明 | 类型 | 默认值 |----- | ----- | ----- | ----- | active | 开关状态 | Boolean | false | size | 尺寸，可选值small/base/large | String | base | disabled | 是否禁用 | Boolean | false