一、需求描述
最近遇到Vant的单选组件的一个交互需求:需要在单选选项选中时再次点击能够取消选中状态:
二、实现代码
<van-radio-group v-model="form.type" direction="horizontal">
<van-radio :name="1" @click.capture="handleClick('type', 1)">单选框1</van-radio>
<van-radio :name="2" @click.capture="handleClick('type', 2)">单选框2</van-radio>
</van-radio-group>
const form = ref({
type: ''
})
const handleVisitTypeCClick = (field, v) => {
if (form.value[field] == v) {
setTimeout(() => {
form.value[field] = ''
}, 50)
} else {
form.value[field] = v
}
return false
}