最近做需求发现一张图看了下挖草,竟然还可以这样,鉴于我对技术要求得苛刻,这个可以试试
刚开始有点思路:可以魔改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;
}
成品图:简直一模一样