uni 单选框css问题

因为单选框圆圈无法隐藏所以直接覆盖掉

<radio-group @change="gaibianxz">
				<view class=" top">
					<radio value="10" class="qianleft" :style="'border: 1px solid '+yanse[0].color+';'"><view class="dxk"><text>10</text>元</view></radio>
					<radio value="40" class="qiancenter" :style="'border: 1px solid '+yanse[1].color+';'"><view class=" dxk"><text>40</text>元</view></radio>
					<radio value="70" class="qianright" :style="'border: 1px solid '+yanse[2].color+';'"><view class=" dxk"><text>70</text>元</view></radio>
				</view>
				<view class=" bottom">
					<radio value="100" class="qianleft" :style="'border: 1px solid '+yanse[3].color+';'"><view class=" dxk"><text>100</text>元</view></radio>
					<radio value="200" class="qiancenter" :style="'border: 1px solid '+yanse[4].color+';'"><view class="dxk"><text>200</text>元</view></radio>
					<radio value="500" class="qianright" :style="'border: 1px solid '+yanse[5].color+';'"><view class=" dxk"><text>500</text>元</view></radio>
				</view>
			</radio-group>

这里我用view 覆盖了radio //不影响radio点击
在这里插入图片描述
还有一个就是选择时css的问题 我解决办法是

调用
radio-group @change="gaibianxz"

标签中
:style="'border: 1px solid '+yanse[1].color+';'"

方法:
gaibianxz:function(e){
				for(var i=0;i<this.yanse.length;i++)
					if(e.target.value==this.yanse[i].value)
						this.yanse[i].color="#FE7837";
					else
						this.yanse[i].color="#EEEEEE";
			}

vye中data
yanse:[{value:10,color:'#EEEEEE'},{value:40,color:'#EEEEEE'},{value:70,color:'#EEEEEE'},{value:100,color:'#EEEEEE'},{value:200,color:'#EEEEEE'},{value:500,color:'#EEEEEE'}],
	jineindex:''
发布了48 篇原创文章 · 获赞 1 · 访问量 3812

猜你喜欢

转载自blog.csdn.net/qq_43840143/article/details/103667309
今日推荐