一、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/n/286997.html
微信扫一扫 
支付宝扫一扫 