switch
更新时间：
开关选择
子组件
不支持
属性
支持通用属性
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| checked | <boolean> |
false | 否 | 可触发 checked 伪类 |
样式
支持通用样式
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| thumb-color | <color> |
#009385 |
否 | 滑块颜色 |
| track-color | <color> |
#009385 |
否 | 滑轨颜色 |
事件
支持通用事件
| 名称 | 参数 | 描述 |
|---|---|---|
| change | {checked:checkedValue} | checked 状态改变时触发 |
switch组件示例
基础用法
<template>
<div class="wrapper">
<switch checked="{{ checked }}" @change="changeHandler"></switch>
<text>{{ state }}</text>
</div>
</template>
<script>
export default {
data() {
return {
checked: false,
state: false
}
},
changeHandler(evt) {
this.state = evt.checked
}
}
</script>
<style>
.wrapper {
align-items: center;
justify-content: center;
}
text {
font-size: 50px;
margin-left: 20px;
}
</style>
复制代码
