利用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、方便使用，在需要用的地方，写上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，但是不支持深度检测：

directive.prototype._setupparamwatcher = function (key, expression) {
 var self = this;
 var called = false;
 var unwatch = (this._scope || this.vm).$watch(expression, function (val, oldval) {
 self.params[key] = val;
 // since we are in immediate mode,
 // only call the param change callbacks if this is not the first update.
 if (called) {
  var cb = self.paramwatchers && self.paramwatchers[key];
  if (cb) {
  cb.call(self, val, oldval);
  }
 } else {
  called = true;
 }
 }, {
 immediate: true,
 user: false
 });(this._paramunwatchfns || (this._paramunwatchfns = [])).push(unwatch);
};

总结

以上就是这篇文章的全部内容，有不对的地方，还请大家多多指教。希望这篇文章的内容对大家能有所帮助。