Switch 滑动开关请使用手机扫码体验

用来打开或关闭选项。

基本用法

  1. html
    <nut-switch 
  2.   :active="true"
  3. >
  4. </nut-switch>

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

  1. html
    <nut-switch 
  2.   :active.sync="swActive"
  3. >
  4. </nut-switch>
  1. javascript
    export default {
  2.   data() {
  3.     return {
  4.       swActive: true
  5.     };
  6.   }
  7. };

自定义尺寸

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

  1. html
    <nut-switch 
  2.   :active="true" 
  3.   size="small"
  4. >
  5. <nut-switch 
  6.   :active="true" 
  7.   size="base"
  8. >
  9. <nut-switch 
  10.   :active="true" 
  11.   size="large"
  12. >

change事件

  1. html
    <nut-switch 
  2.   @change="onChange"
  3. >
  4. </nut-switch>
  1. javascript
    export default {
  2.   methods: {
  3.     onChange(status) {
  4.       alert(status);
  5.     }
  6.   }
  7. };

禁用状态

  1. html
    <nut-switch 
  2.   :disabled="true"
  3. >
  4. </nut-switch>
禁用状态下，change事件参数永远为初始值

自定义Class

  1. html
    <nut-switch 
  2.   :active="true"  
  3.   class="my-switch"
  4. >
  5. </nut-switch>

Prop

字段说明类型默认值
active开关状态Booleanfalse
size尺寸，可选值small/base/largeStringbase
disabled是否禁用Booleanfalse