quark-switch v1.0.1

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