如何用Vue实现一个全选指令

最近用vue做了两个项目，都需要实现全选反选的功能，两个项目用了两种实现方法，第一个项目用vue的computed，第二个项目用指令来实现，用起来，发觉指令更加方便。

第一次做全选的时候是刚开始接触vue不久，全选的实现参考了知乎(链接：https://www.zhihu.com/question/37833194/answer/91812053)上的实现方法：

1、从服务器拿到数据，为每个item设置checked属性

2、计算选中的数量selectCount,如果选中的数量与selectItems的数量相等，则全选selectAll选中

3、点全选时，将每个item的checked属性置为true，反选时置为false，

4、每次selectItems的属性发生变化时，都将checked的为true的item放入数组checkedGroups中

下面为实现代码：

1. //全选 
2.   data: function() { 
3.       return { 
4.           selectItems: [],  // 从服务器拿到的数据 
5.       } 
6.   }, 
7.   computed: { 
8.       // 全选checkbox绑定的model 
9.       selectAll: { 
10.           get: function() { 
11.               return this.selectCount == this.selectItems.length; 
12.           }, 
13.           set: function(value) { 
14.               this.selectItems.forEach(function(item) { 
15.                   item.checked = value; 
16.               }); 
17.               return value; 
18.           } 
19.       }, 
20.       //选中的数量 
21.       selectCount: { 
22.           get: function() { 
23.               var i = 0; 
24.               this.selectItems.forEach(function(item) { 
25.                   if (item.checked) { 
26.                       i++; 
27.                   } 
28.               }); 
29.               return i; 
30.           } 
31.       }, 
32.       //选中的数组 
33.       checkedGroups: { 
34.           get: function() { 
35.               var checkedGroups = []; 
36.               this.selectItems.forEach(function(item) { 
37.                   if (item.checked) { 
38.                       checkedGroups.push(item); 
39.                   } 
40.               }); 
41.               return checkedGroups; 
42.           } 
43.       } 
44.   }  

这种方法用起来不太方便，首先是很难复用，每次要用到的时候都需要写一次computed，其次是selectAll、checkedGroups、selectItems都已经固定，不太灵活。

所以在这次项目中，我用vue的指令重新实现了全选的功能，directive的思路其实跟computed差不多，先上代码：

1. export default { 
2.     'check-all': { 
3.         twoWay: true, 
4.         params: ['checkData'], 
5.         bind() { 
6.             /** 
7.              - 如果所有的列表的checked属性都为true,则选中全选框,否则不选中全选框 
8.              */ 
9.             this.vm.$watch(this.params.checkData, (checkData) => { 
10.                 if (checkData.every((item) => item.checked)) { 
11.                     this.set(true); 
12.                 } else { 
13.                     this.set(false); 
14.                 } 
15.             }, { deep: true }); 
16.         }, 
17.         // checkAll发生更改时 
18.         update(checkAll) { 
19.             /** 
20.              - 如果全选框被选中,则将列表的所有checked属性转为true,否则转为false 
21.              */ 
22.             if (checkAll) { 
23.                 this.vm[this.params.checkData].forEach((item) => { 
24.                     item.checked = true; 
25.                 }); 
26.             } else { 
27.                 this.vm[this.params.checkData].forEach((item) => { 
28.                     item.checked = false; 
29.                 }); 
30.             } 
31.         }, 
32.     }, 
33. };  

调用：

1. <input type="checkbox" v-model="checkAll" v-check-all="checkAll" check-data="checkData"> 
2.         <ul> 
3.             <li v-for="item in checkData"> 
4.                 <input type="checkbox" v-model="item.checked"> 
5.                 {{item.text}} 
6.             </li> 
7.         </ul> 

先说说这样用的优点：

1、方便使用，在需要用的地方，写上v-check-all指令和check-data就可以

2、全选的model和数组名可以定制，用什么名字都可以，全选的model不想叫checkAll叫checkAllData也可以，数组不想叫checkData叫dataFromServer也可以。

在指令中，指定twoWay为true,就可以用this.set(value)来设置checkAll的值，用params接收绑定指令元素上的属性值checkData,也就是需要操作的数组。

用this.vm获取使用指令的上下文，调用上下文的$watch来监听checkData的变化，如果checkData全部选中，则设置checkAll为true，否则设置checkAll为false。

当指令值(checkAll)发生变化，如果为true，则将checkData的checked属性都设为true，否则为false。至此，一个全选的指令就完成了。

在做这个全选指令的时候，本来想用paramWatchers来监听checkData的变化的，但是发觉checkData变动时，并不会触发paramWatchers的回调，后来看了一下源码才发现，paramWatchers其实也是调用了$watch，但是不支持深度检测：

1. Directive.prototype._setupParamWatcher = function (key, expression) { 
2.   var self = this; 
3.   var called = false; 
4.   var unwatch = (this._scope || this.vm).$watch(expression, function (val, oldVal) { 
5.     self.params[key] = val; 
6.     // since we are in immediate mode, 
7.     // only call the param change callbacks if this is not the first update. 
8.     if (called) { 
9.       var cb = self.paramWatchers && self.paramWatchers[key]; 
10.       if (cb) { 
11.         cb.call(self, val, oldVal); 
12.       } 
13.     } else { 
14.       called = true; 
15.     } 
16.   }, { 
17.     immediate: true, 
18.     user: false 
19.   });(this._paramUnwatchFns || (this._paramUnwatchFns = [])).push(unwatch); 
20. };  

本人中途改行，入行1年出头，还有很多东西要学，有不对的地方，还请大家多多指教。为了勉励自己多些总结，开了个微信公众号(front-end-article)，最近都在用vue做项目，近期应该会写一些关于vue的文章。有兴趣可以关注一下哦，或者投稿也可以，多多交流哈。

作者：对角另一面

来源：51CTO