基本思路就是：設(shè)置一個變量，記錄選擇前的綁定值，然后在click事件中判斷與當(dāng)前的綁定值是否相同。相同就清空標(biāo)識符，并將變量設(shè)為空。不同就將當(dāng)前綁定值賦值給變量。
這里我使用的是Vant框架的Vue3.0版本，選擇搭配Cell組件使用Radio單選框。
Html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta charset="utf-8" />
<!-- 移動設(shè)備 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" />
<!-- 引入組件庫 -->
<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: {
//當(dāng)前選中的值 （null:沒有選中時的值）
checkedValue: null,
//之前選中的值 （null:沒有選中時的值）
prevValue: null,
}
}
},
methods: {
handleRadioClick(value) {
if (value != this.radio.prevValue) {
/* 選中前的值與當(dāng)前選中的值不相同 */
this.radio.prevValue = value;
//搭配Cell組件時，這里需要自己設(shè)置當(dāng)前選中的值
this.radio.checkedValue = value;
} else {
/* 選中前的值與當(dāng)前選中的值相同 */
this.radio.checkedValue = null;
this.radio.prevValue = null;
}
}
}
});
app.use(vant);
const vm = app.mount("#app");
如有錯誤，歡迎指出，謝謝！
