利用Vue.js指令实现全选功能

因为刚开始接触vue不久，全选的实现参考了知乎上的实现方法：

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

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

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

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

下面为实现代码：

 //全选 data: function() {  return {   selectItems: [], // 从服务器拿到的数据  } }, computed: {  // 全选checkbox绑定的model  selectAll: {   get: function() {    return this.selectCount == this.selectItems.length;   },   set: function(value) {    this.selectItems.forEach(function(item) {     item.checked = value;    });    return value;   }  },  //选中的数量  selectCount: {   get: function() {    var i = 0;    this.selectItems.forEach(function(item) {     if (item.checked) {      i++;     }    });    return i;   }  },  //选中的数组  checkedGroups: {   get: function() {    var checkedGroups = [];    this.selectItems.forEach(function(item) {     if (item.checked) {      checkedGroups.push(item);     }    });    return checkedGroups;   }  } }

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

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

export default { 'check-all': {  twoWay: true,  params: ['checkData'],  bind() {   /**    - 如果所有的列表的checked属性都为true,则选中全选框,否则不选中全选框    */   this.vm.$watch(this.params.checkData, (checkData) => {    if (checkData.every((item) => item.checked)) {     this.set(true);    } else {     this.set(false);    }   }, { deep: true });  },  // checkAll发生更改时  update(checkAll) {   /**    - 如果全选框被选中,则将列表的所有checked属性转为true,否则转为false    */   if (checkAll) {    this.vm[this.params.checkData].forEach((item) => {     item.checked = true;    });   } else {    this.vm[this.params.checkData].forEach((item) => {     item.checked = false;    });   }  }, },};

调用：

<input type="checkbox" v-model="checkAll" v-check-all="checkAll" check-data="checkData">  <ul>   <li v-for="item in checkData">    <input type="checkbox" v-model="item.checked">    {{item.text}}   </li>  </ul>

先说说这样用的优点：

1、方便使用，在需要用的地方，写上