一、uniapp複選框樣式
uniapp的複選框可以根據不同的需求設置不同的樣式。首先，我們需要定義 checkbox 的外層包裹元素 class 類名，然後通過對該 class 進行樣式設置，代碼如下：
/* checkbox 組件外層包裹元素 */
.checkbox-group {
display: flex;
flex-direction: row;
align-items: center;
}
/* checkbox 組件樣式 */
.checkbox {
margin-right: 10px;
width: 20px;
height: 20px;
border-radius: 4px;
border: 1px solid #ccc;
background-color: #fff;
}
/* 選中狀態 */
.checkbox:checked {
background-color: #007aff;
border-color: #007aff;
}
/* 半選中狀態 */
.checkbox:indeterminate {
background-color: #007aff;
border-color: #007aff;
}
二、uniapp複選框動態選中
要動態選中一個複選框，我們可以使用 v-model 來綁定一個 data 中定義的變數，然後通過修改該變數的值來動態選中或取消選中一個複選框。代碼如下：
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/286997.html
微信掃一掃 
支付寶掃一掃 