最近在项目实现一个问卷调研的功能,发现正常情况下,多选框是可以单击取消选中状态的,单选框就不行,单选框选中了就不能再取消,刚开始自己不知道怎么解决,然后自己百度了下,果然还是有大神解决了。
在这里插入图片描述
1、问题就是将input radio单选框改造成单击可以取消其选中状态

2、单纯的对input radio进行js控制行不通,因为radio是通过v-repeat出来的,有很多个,如果每一个都去获取元素的话,执行效率太低,failed

3、给radio添加click事件,判断checked属性,如果为true则取消checked,但由于radio每次click都会将自己的checked置为true(Vue的数据双向绑定速度也是很快的),数据赋值速度之快以至于每次click获取到的checked值都为true,failed

4、当一个radio从未选中到选中状态,会先触发click再触发change事件,因此只要在click事件判断当前radio是否触发了change事件,如果没触发change事件说明当前radio是选中状态,此时则把该radio的checked置为false,就可以实现单击选中状态的radio取消其选中状态

5、以上第4点有一个逻辑漏洞,因为click先触发,change后触发,那如何在click中判断当前radio是否触发了change呢?需要将click事件中的js判断逻辑手动放到change触发之后执行,则将click中的逻辑放在setTimeout延迟0秒,手动将这段逻辑执行排在了change事件队列的后面

赋上vue代码如下:

//tempalta里面的单选框
<input
  type="radio"
 :value="qitem.optionValue"
  class="radio float-left"
  @change="retainRecord"
  @click="controlSingel($event)"
 />
 // data里定义changed,
 //methods
   controlSingel($event) {
      let _this = this;
      window.setTimeout(() => {
        if (!this.changed) {
          $event.target.checked = false
           // 可以写些单选框没有选中的代码处理
        } 
        _this.changed = false;
      }, 0);
   },
   retainRecord(){
      // 可以写些单选框选中的代码处理
      this.changed = true;
   }

以上是本人实践,根据别人的链接说还可以将它封装为一个vue的指令,我这边暂时还没去实践到,所以没写进去,今天自己测了并优化了,可以把绑定 :checked="changed"去掉,正如作者所说的changed就作为判断依据而已
参考的链接:https://zhuanlan.zhihu.com/p/27130030?utm_source=wechat_session&utm_medium=social&s_s_i=wj4pPqmkaQX0sycM%2FWY0%2B%2BYGK5kx%2FAtls%2BqvpXR%2FrPg%3D&s_r=1


Logo

前往低代码交流专区

更多推荐