关于Vant组件中单选框的选中与取消选中的实现
Vue 项目中,实现 Vant 组件中的 Radio 单选框点击时取消选中状态
·
原理
Vant 组件中的 Radio 单选框想实现取消选中的状态,其原理很简单,主要运用了 change 和 click这两个事件。当默认没有选中状态时,点击单选框时触发 change 事件,再次点击单选框时先触发 click 事件,此时把 checked 设为空值,这样选中状态就变为了未选中状态。在实现该功能的时需要设一个flag,本次开发使用的是Vue框架,在data里面设置了checkRadioFlag: false。具体实现代码如下:
HTML
<van-radio-group v-model="checked" @change="changeFn">
<van-radio name="1" @click="clickFn">单选框 1</van-radio>
<van-radio name="2" @click="clickFn">单选框 2</van-radio>
</van-radio-group>
JS
1、checked默认值为空时
<script>
export default {
data() {
return {
checked: '',
checkRadioFlag: false
}
},
methods: {
clickFn() {
if(this.checkRadioFlag) {
this.checked = '';
}
this.checkRadioFlag = true;
},
changeFn() {
this.checkRadioFlag = false;
}
}
}
</script>
2、checked默认值不为空时
<script>
export default {
data() {
return {
checked: '1',
checkRadioFlag: false
}
},
methods: {
clickFn() {
if(!this.checkRadioFlag) {
this.checked = '';
}
this.checkRadioFlag = false;
},
changeFn() {
this.checkRadioFlag = true;
}
}
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)