在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。

解决方案有以下几种:

  1. 使用CSS变量自定义样式:
uni-radio .uni-radio-input {
  --checked-color: #007aff; /* 选中颜色 */
  --checked-border-color: #007aff;
}
  1. 通过组件的checked属性进行样式判断:
<uni-radio :class="{'custom-checked': isChecked}"></uni-radio>
  1. 使用深度选择器修改内部样式(需要加上style标签的scoped属性):
::v-deep .uni-radio-input.uni-radio-input-checked {
  background-color: red;
}
  1. 直接使用uni-ui提供的主题变量:
:root {
  --uni-primary: #007aff;
}
回到顶部