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里面 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐