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


Posted in Javascript onSeptember 08, 2016

因为刚开始接触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);
};

总结

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

Javascript 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 #Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 #Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 #Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 #Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 #Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 #Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 #Javascript
You might like
php xml实例 留言本
2009/03/20 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
javascript与CSS复习(二)
2010/06/29 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
简单的通用表达式求10乘阶示例
2014/03/03 Python
Python中装饰器的一个妙用
2015/02/08 Python
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
Python如何实现定时器功能
2020/05/28 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
中软国际Java程序员笔试题
2014/07/19 面试题
销售文员的岗位职责
2013/11/20 职场文书
影视动画专业个人的自我评价
2013/12/31 职场文书
公司新员工的演讲稿注意事项
2014/01/01 职场文书
高中历史教学反思
2014/02/08 职场文书
公司活动总结范文
2014/07/01 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
2014年会计工作总结
2014/11/27 职场文书
JavaScript 数组去重详解
2021/09/15 Javascript