uView中的radio组件自定义样式（实心圆点）

大家在开发uniapp时，应该都用过radio组件，也用过uview里的u-radio。在一般设计中都是实心圆点或者空心圆的选择状态，但是这里的radio是"对号"。在这里我把我做的样式分享一下，希望能够帮到大家。

1. HTML部分

在HTML中动态绑定class类

  <view class="label">
     <u-radio-group
       v-model="radioValue"
       wrap
       size="28"
       active-color="#B9895E"
       >
       <u-radio name="man" :class="{ 'pitchOn' : radioValue === 'man'}">男生</u-radio>
       <u-radio name="woman" :class="{ 'pitchOn' : radioValue === 'woman'}">女生</u-radio>
     </u-radio-group>
</view>

2. CSS部分

使用样式穿透将原本形状改变为圆形，然后再定义一个class类用来做选中的背景颜色。

::v-deep .u-radio__icon-wrap {
    
    
  background-color: $uni-bg-color !important;
}
::v-deep .u-radio__icon-wrap__icon {
    
    
  width: 100%;
  height: 100%;
  position: relative;
}
::v-deep .u-icon {
    
    
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
::v-deep .u-icon__icon::before {
    
    
  display: inline-block;
  content: "" !important;
  width: 16rpx;
  height: 16rpx;
  background-color: #d9d9d9;
  border: none;
  border-radius: 50%;
}

//  选中的背景颜色
::v-deep
  .pitchOn
  > .u-radio
  > .u-radio__icon-wrap
  > .u-radio__icon-wrap__icon
  > .u-icon
  > .u-icon__icon::before {
    
    
  background-color: #b9895e;
}

3. JS部分

在data中绑定当前选中的。

data() {
    
    
  return {
    
    
      radioValue : "woman", // 单选当前选中
    };
 },

通过以上步骤，就可以自定义uView单选框组件修改选中时的样式啦！