基本思路就是：设置一个变量，记录选择前的绑定值，然后在click事件中判断与当前的绑定值是否相同。相同就清空标识符，并将变量设为空。不同就将当前绑定值赋值给变量。
这里我使用的是Vant框架的Vue3.0版本，选择搭配Cell组件使用Radio单选框。
Html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta charset="utf-8" />
<!-- 移动设备 viewport -->
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
<!-- 引入Vue3.0 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css" />
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>
</head>
<body>
<div id="app">
<van-radio-group v-model="radio.checkedValue">
<van-cell-group inset>
<van-cell title="单选框 1" clickable @click="handleRadioClick('1')">
<template #right-icon>
<van-radio name="1"></van-radio>
</template>
</van-cell>
<van-cell title="单选框 2" clickable @click="handleRadioClick('2')">
<template #right-icon>
<van-radio name="2"></van-radio>
</template>
</van-cell>
</van-cell-group>
</van-radio-group>
</div>
</body>
</html>
JavaScript代码
const app = Vue.createApp({
data() {
return {
radio: {
//当前选中的值 （null:没有选中时的值）
checkedValue: null,
//之前选中的值 （null:没有选中时的值）
prevValue: null,
}
}
},
methods: {
handleRadioClick(value) {
if (value != this.radio.prevValue) {
/* 选中前的值与当前选中的值不相同 */
this.radio.prevValue = value;
//搭配Cell组件时，这里需要自己设置当前选中的值
this.radio.checkedValue = value;
} else {
/* 选中前的值与当前选中的值相同 */
this.radio.checkedValue = null;
this.radio.prevValue = null;
}
}
}
});
app.use(vant);
const vm = app.mount("#app");
如有错误，欢迎指出，谢谢！
