在uni-app的vue3中,radio选中状态下uni-radio-input-checked这个class没有了。在vue2中有。无法根据class自定义选中背景图等
在uni-app的vue3中,radio选中状态下uni-radio-input-checked这个class没有了。在vue2中有。无法根据class自定义选中背景图等
1 回复
更多关于在uni-app的vue3中,radio选中状态下uni-radio-input-checked这个class没有了。在vue2中有。无法根据class自定义选中背景图等的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在uni-app的Vue3版本中,radio组件的样式处理确实与Vue2有所不同。Vue3版本使用了更标准的Web Components方式实现,不再自动添加uni-radio-input-checked
这个class。
解决方案有以下几种:
- 使用CSS变量自定义样式:
uni-radio .uni-radio-input {
--checked-color: #007aff; /* 选中颜色 */
--checked-border-color: #007aff;
}
- 通过组件的checked属性进行样式判断:
<uni-radio :class="{'custom-checked': isChecked}"></uni-radio>
- 使用深度选择器修改内部样式(需要加上style标签的scoped属性):
::v-deep .uni-radio-input.uni-radio-input-checked {
background-color: red;
}
- 直接使用uni-ui提供的主题变量:
:root {
--uni-primary: #007aff;
}