radio魔改checkbox样式

最近做需求发现一张图看了下挖草,竟然还可以这样,鉴于我对技术要求得苛刻,这个可以试试

刚开始有点思路:可以魔改checkbox,但是一直可以多选后面懒得弄了,主要是要下班了

上代码(html)

<view class="item">
			<label class="item-name">命主性别:</label>
			<view class="value">
				<view class="container">
					<view class="radio-group">
						<label class="radio-label" @click="toggleRadio(1)">
							<radio class="custom-radio" :value="1" :checked="selectedOption === 1" />
							<view class="custom-radio-box" :class="{ 'checked': selectedOption === 1 }"></view>
							男
						</label>
						<label class="radio-label" @click="toggleRadio(2)">
							<radio class="custom-radio" :value="2" :checked="selectedOption === 2" />
							<view class="custom-radio-box" :class="{ 'checked': selectedOption === 2 }"></view>
							女
						</label>
					</view>
				</view>
			</view>
		</view>

JS部分

const selectedOption = ref(1); // 默认选中第一个选项

	const toggleRadio = (value) => {
		selectedOption.value = value;
//注:这个必须给后端需要的字段赋值
		sex.value = value
	};

CSS

.container {
	  display: flex;
	}
	
	.radio-group {
	  display: flex;
	  flex-direction: row;
	  align-items: flex-start;
	}
	
	.radio-label {
	  display: flex;
	  align-items: center;
	  position: relative;
	  cursor: pointer; 
	}
	
	.custom-radio {
	  display: none; 
	}
	
	.custom-radio-box {
	  width: 20px;
	  height: 20px;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  margin-right: 10px;
	  position: relative;
	  transition: border-color 0.3s;
	}
	
	.custom-radio-box.checked {
	  border-color: #79171C;
	  background-color: #79171C;
	}
	
	.custom-radio-box.checked::after {
	  content: '√';
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  color: #fff;
	  font-size: 14px;
	  font-weight: bold;
	}

成品图:简直一模一样

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值