你的位置:首页 > Java教程

[Java教程]用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中

下面为实现代码:

  //全选  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);};

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