uniapp中实现radio实心圆单选

在uniapp中，radio的单选样式的打勾样式，并且input组件不能使用type="radio"类型，这样并不能满足日常的radio需求

 

 需要实现实心圆的radio单选，只能根据原生样式进行设计，下面使用vue.js举例

<view>
		<view><radio>1</radio></view>
		<view class="radio-content">
		  <view class="radio-content" @click="changeRadio1">
		      <view class="radio" :class="radio1 == 1 ? 'radio-default':''">
		        <view :class="radio1 == 1 ? 'radio-active':''"></view>
		      </view>
		      <text>单位</text>
		    </view>
		    <view class="radio-content radio-right" @click="changeRadio2">
		      <view class="radio" :class="radio1 == 2 ? 'radio-default':''">
		        <view :class="radio1 == 2 ? 'radio-active':''"></view>
		      </view>
		      <text>个人</text>
		    </view>
		  </view>
	</view>

 data中定义radio1

data() {
    return {
		radio1: 1
	}
},

 methods中定义方法

changeRadio1() {
	this.radio1 = 1;
	console.log("单位")
},
changeRadio2() {
	this.radio1 = 2;
	console.log("个人")
}, 

 定义样式

.radio-content {
	  height: 40rpx;
	  display: flex;
	  align-items: center;
	}
	.radio {
	  width: 24rpx;
	  height: 24rpx;
	  border-radius: 50%;
	  border: 2rpx solid #CCCCCC;
	  display: flex;
	  flex-direction: column; 
	  align-items: center;
	  justify-content: center;
	  margin: 0rpx 26rpx 0rpx 15rpx;
	}
	.radio-active{
	  width: 16rpx; 
	  height: 16rpx;
	  border-radius: 50%;
	  background-color: #0fbda6;
	}
	.radio-default{
	  border: 2rpx solid #0fbda6;
	}
	.radio-right {
	  margin-left: 66rpx;
	}

 效果