本节任务
- 设置开关状态
- 设置不可用状态
- 修改背景
- 获取开关状态
本节内容比较简单,创建一个switch.vue 来写本节的内容,
注意一点,本节内容请务必使用真机测试
1.设置开关状态
<switch class="switch" checked="false"> </switch>
B0A53B84-D3B0-4881-8B59-154E513BD5B0.png
<switch class="switch" checked="true"> </switch>
2B5F659C-D0D3-4EBB-BEA0-C6655F1738E9.png
2.设置不可用
<switch class="switch" checked="true" disabled="true"> </switch>
25271CF7-9485-450F-A1FF-2F09ACC4C53F.png
3.设置背景颜色
.switch{
border-radius: 35px;
background-color: red;
}
B358A296-2037-4665-AA63-19DB25E6E532.png
4.获取改变的状态
监测change事件
<switch class="switch" checked="true" disabled="false" @change="change"> </switch>
事件监测
<script>
export default{
methods:{
change(e){
console.log(e.value)
}
}
}
</script>
当开关的状态改变的时候会触发change方法 传入参数e,通过获取value的值,可知道当前switch的开关状态,值为true/false
由于H5 无法获取到系统的颜色,所以开发者将switch的颜色做成了iOS 系统默认的颜色,暂时无法更改,请大家尽量使用系统效果!
