自定义一个radio

html

<view class="radio-out" :style="{'border-color': selectFlag?'blue':''}">
      <view class="radio-in" :style="{'background-color': selectFlag?'blue':''}"> </view>
</view>

js

selectFlag: false,

changeSelect() {
                console.log(this.selectFlag)
                this.selectFlag = !this.selectFlag
            }

css

.radio-out {
        display: flex;
        width: 32rpx;
        height: 32rpx;
        border: 1px solid #ccc;
        border-radius: 1em;
        justify-content: center;
        align-items: center;
        margin: 10rpx;
    }

    .radio-in {
        display: flex;
        width: 16rpx;
        height: 16rpx;
        border-radius: 1em;
    }

最终样式--点击前

 点击后