uniapp 将radio单选的样式变为实心圆

上样式截图

找了很多资料，只有这个亲测有效：

<template>

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

</template>

<script>

changeRadio1() {

this.radio1 = 1;

},

changeRadio2() {

this.radio1 = 2;

}

</script>

<style>

.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;

}

</style>