关于Vant组件中单选框的选中与取消选中的实现

原理

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>