因为单选框圆圈无法隐藏所以直接覆盖掉
<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:''