Switch (开关)
移动端常见组件
可自定义颜色
代码示例
绑定boolean值
通过v-model绑定组件值
颜色
color属性支持官方内置的所有颜色
尺寸
small、default、large三个尺寸。默认为default或不写。使用size属性进行设置
文字和图标
自定义内容,建议如果使用2个汉字,将开关尺寸设置为large
开
关
开启
关闭
不可用
禁用开关
监听change
监听开关状态的改变来处理业务逻辑
export default {
data () {
return {
switchValue: false
}
},
methods: {
handleChange (check) {
this.$toast({
message: check ? 'ON' : 'OFF',
duration: 500
})
}
}
}