uniapp 手写 radio

前言：我开发微信小程序事，写一个地址管理，要给其中一个地址设置为默认地址，使用第三方库的radio 和 input type="radio" ，都不能很好的控制选中和未选中状态，所以我决定手下radio。

效果图如下：

一、写代码的逻辑

1. 手写一个圆

2. 在uview plus 找到 √ 这个icon组件

3. 根据属性 设置圆的背景色

 

二、具体代码

<template>
    <view class="radioBox" @click="selectRadio(item)">
			<view class="radioStyle" :class="{ radioBackground: item.radioFlag }">
				<u-icon name="checkbox-mark" color="white"></u-icon>
			</view>
			<text>设为默认</text>
    </view>
</template>

<style scoped lang="less">
         .radioBox{
					display: flex;
					flex-direction: row;
					align-items: center;
					.radioStyle{
						display: flex;
						justify-content: center;
						align-items: center;
						width: 45rpx;
						height: 45rpx;
						border-radius: 50%;
						border: 1rpx solid #f8f8f8;
					}
					.radioBackground{
						background-color: red;
					}
					text{
						font-size: 26rpx;
						margin-left: 16rpx;
						display:inline-block;
					}
				}
			
</style>

<script setup>
const selectRadio = ()=>{
  //具体改变属性radioFlag的逻辑
}
</script>