咳咳。。。如标题所讲,看起来好简单的样子,但是这个需求在一个Vue架构的中大型项目中实现起来又貌似不是想象中的那么容易。以下是我的思路,愚见求各位大佬指教。
分析:
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事件队列的后面
6、多说无益,打码:
7、以上代码中的changed就作为判断依据,因为这只是改造了原生的radio,所以是不会污染原来绑定的数据,可以放心去撸后面的码
8、下一步优化就是把这段逻辑封装到Vue中的directive作为公共radio组件,见以下代码
9、组件分析:没什么好说的,就是单纯的把第6点的逻辑封装在了一个公共的directive组件中(无奈,因为使用的的是Vue1,这个版本暂时还没有虚拟DOM,其实更好的做法是把它做成一个虚拟DOM)
10、Vue中使用这个公共组件,只需要加'v-radio'属性即可