uniapp修改radio的样式
uniapp原生的radio是有样式的,勾勾样式radio的默认颜色,在不同平台不一样。微信小程序是绿色的,字节跳动小程序为红色,其他平台是蓝色的。更改颜色使用color属性。用官网的实例来,源码如下:<radio-group @change="radioChange"><label class="uni-list-cell uni-list-cell-pd" v-for="(i
·
uniapp原生的radio是有样式的,勾勾样式
- radio的默认颜色,在不同平台不一样。微信小程序是绿色的,字节跳动小程序为红色,其他平台是蓝色的。更改颜色使用color属性。
用官网的实例来,源码如下:
<radio-group @change="radioChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
<view>
<radio :value="item.value" :checked="index === current" />
</view>
<view>{{item.name}}</view>
</label>
</radio-group>
js代码如下:
export default {
data() {
return {
items: [{
value: 'USA',
name: '美国'
},
{
value: 'CHN',
name: '中国',
checked: 'true'
},
{
value: 'BRA',
name: '巴西'
},
{
value: 'JPN',
name: '日本'
},
{
value: 'ENG',
name: '英国'
},
{
value: 'FRA',
name: '法国'
},
],
current: 0
}
},
methods: {
radioChange: function(evt) {
for (let i = 0; i < this.items.length; i++) {
if (this.items[i].value === evt.detail.value) {
this.current = i;
break;
}
}
}
}
}
但是我需要远点样式。于是更改方式如下
修改 radio 的样式要在 App.vue 中修改
/* radio 选中后的样式 */
uni-radio .uni-radio-input.uni-radio-input-checked{
background-color: #248067!important;
border-color: #248067!important;
background-clip: content-box!important;
padding: 6rpx!important;
box-sizing: border-box;
}
/* radio 选中后的图标样式*/
uni-radio .uni-radio-input.uni-radio-input-checked::before{
display: none!important;
}
当然害怕污染其他地方的,可以在修改的地方用/deep/来在所在文件修改
/deep/.uni-radio-input-checked{
background-color: #248067!important;
border-color: #248067!important;
background-clip: content-box!important;
padding: 6rpx!important;
box-sizing: border-box;
}
/deep/.uni-radio-input-checked::before{
display: none!important;
}
建议写到该radio框所在的容器view里面
更多推荐
已为社区贡献2条内容
所有评论(0)