本節(jié)任務(wù)
- 設(shè)置開關(guān)狀態(tài)
- 設(shè)置不可用狀態(tài)
- 修改背景
- 獲取開關(guān)狀態(tài)
本節(jié)內(nèi)容比較簡(jiǎn)單,創(chuàng)建一個(gè)switch.vue 來寫本節(jié)的內(nèi)容,
注意一點(diǎn),本節(jié)內(nèi)容請(qǐng)務(wù)必使用真機(jī)測(cè)試
1.設(shè)置開關(guān)狀態(tài)
<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.設(shè)置不可用
<switch class="switch" checked="true" disabled="true"> </switch>
25271CF7-9485-450F-A1FF-2F09ACC4C53F.png
3.設(shè)置背景顏色
.switch{
border-radius: 35px;
background-color: red;
}
B358A296-2037-4665-AA63-19DB25E6E532.png
4.獲取改變的狀態(tài)
監(jiān)測(cè)change事件
<switch class="switch" checked="true" disabled="false" @change="change"> </switch>
事件監(jiān)測(cè)
<script>
export default{
methods:{
change(e){
console.log(e.value)
}
}
}
</script>
當(dāng)開關(guān)的狀態(tài)改變的時(shí)候會(huì)觸發(fā)change方法 傳入?yún)?shù)e,通過獲取value的值,可知道當(dāng)前switch的開關(guān)狀態(tài),值為true/false
由于H5 無法獲取到系統(tǒng)的顏色,所以開發(fā)者將switch的顏色做成了iOS 系統(tǒng)默認(rèn)的顏色,暫時(shí)無法更改,請(qǐng)大家盡量使用系統(tǒng)效果!
