uni-app 修改 radio/checkbox/switch 组件样式

朱雀 2021-03-29 10:48 3499阅读 0赞

我们在用 uni-app 开发前端页面时，往往需要修改一些组件的默认样式，特别是颜色。那么如何修改 radio/checkbox/switch（单选框/复选框/开关）的样式呢？可以通过覆盖样式的方式实现。

下面以单选框 radio 为例（基于 colorui）说明。

### 在 App.vue 文件的 style 中增加以下样式覆盖 colorui 的样式：

```css
/* 重设 radio、checkbox 大小和位置，否则在不同分辨率小会变形 */
/* #ifndef MP-ALIPAY */
radio::before,
checkbox::before {
    margin-top: -8rpx;
    right: 8rpx;
    font-size: 36rpx;
    line-height: 16rpx;
}

radio .wx-radio-input,
checkbox .wx-checkbox-input,
radio .uni-radio-input,
checkbox .uni-checkbox-input {
    margin: 0;
    width: 48rpx;
    height: 48rpx;
}
/* #endif */

/* 覆盖样式修改颜色 */
switch.theme[checked] .wx-switch-input.wx-switch-input-checked,
checkbox.theme[checked] .wx-checkbox-input,
radio.theme[checked] .wx-radio-input,
switch.theme.checked .uni-switch-input.uni-switch-input-checked,
checkbox.theme.checked .uni-checkbox-input,
radio.theme.checked .uni-radio-input {
    background-color: #FB5F43 !important;
    border-color: #FB5F43 !important;
    color: #ffffff !important;
}

/* 鼠标移到上面的边框颜色 */
uni-radio:not([disabled]) .uni-radio-input:hover, uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
  border-color: #d1d1d1!important;
}
```

### 在对应组件中加上 class="theme"，如下：

```xml
<radio-group @change="changePayType">
    <radio class="theme" :class="payType === '1' ? 'checked' : ''" :checked="payType === '1'" value="1"/>
    <radio class="theme" :class="payType === '2' ? 'checked' : ''" :checked="payType === '2'" value="2"/>
</radio-group>
```

### 单项选择器的切换事件 change 如下：

```
export default {
    data() {
        return {
            payType: '1'
        }
    },
    methods: {
        changePayType (e) {
            this.payType = e.detail.value
        }
    }
}
```

### 最终的运行效果图如下：

![](/images/20210329/1617014893476.jpg)

### 注意事项:

- 仅测试 搜狗、Chrome、Edge 浏览器，以及微信小程序、安卓APP。
- APP 在切换 radio 时，会有蓝色闪现，时间很快。