Switch 滑动开关
用来打开或关闭选项。
基本用法
<nut-switch
:active="true"
>
</nut-switch>
加上 .sync 可实现数据的“双向绑定”。
<nut-switch
:active.sync="swActive"
>
</nut-switch>
export default {
data() {
return {
swActive: true
};
}
};
自定义尺寸
内置 small,base,large 三种规格供使用。
<nut-switch
:active="true"
size="small"
>
<nut-switch
:active="true"
size="base"
>
<nut-switch
:active="true"
size="large"
>
change事件
<nut-switch
@change="onChange($event,'1')"
>
</nut-switch>
export default {
methods: {
onChange(status,index) {
alert('status:'+status+',selected:'+index);
}
}
};
禁用状态
<nut-switch
:disabled="true"
>
</nut-switch>
禁用状态下,change事件参数永远为初始值
自定义Class
<nut-switch
:active="true"
class="my-switch"
>
</nut-switch>
内嵌文字
<nut-switch
:active="true"
:label="开|关"
>
</nut-switch>
Prop
字段 | 说明 | 类型 | 默认值 |
---|---|---|---|
active | 开关状态 | Boolean | false |
size | 尺寸,可选值small/base/large | String | base |
disabled | 是否禁用 | Boolean | false |
label | 内嵌文字标签,竖线分开,如ON|OFF 或 开|关 | String |