quark-switch

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