用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);
};

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏算法修养

PAT 1009 Product of Polynomials

1009. Product of Polynomials (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16...

36811
来自专栏张善友的专栏

IronPython整合Windows PowerShell

      Windows PowerShell 是微软为 Windows 环境所开发的 shell 及脚本语言技术,这项全新的技术提供了丰富的控制与自动化的系...

1807
来自专栏张善友的专栏

性能分析工具dotTrace

JetBrains又发布了其dotNet相关的新工具——dotTrace,看起来是个很不错的分析工具(Profiling Tool),可以分析windows f...

18310
来自专栏Windows Community

New UWP Community Toolkit

概述 UWP Community Toolkit 是一个 UWP App 自定义控件、应用服务和帮助方法的集合,能够很大程度的简化和指引开发者的开发工作,相信广...

33611
来自专栏张善友的专栏

在Windows 7/Server 2008 R2上部署asp.net 1.1程序

.NET 1.1只有32位的,Windows Server 2008 R2只有64位的,可以通过WOW64运行32位应用程序,按照How to install ...

1825
来自专栏一个会写诗的程序员的博客

React.js 集成 Kotlin Spring Boot 开发 Web 应用实例详解工程源代码参考文章

React.js 集成 Kotlin Spring Boot 开发 Web 应用实例详解

582
来自专栏技术博文

开启phpMyAdmin高级功能的设置方法

开启phpMyAdmin高级功能的设置方法 注:本文基于phpMyAdmin5.5 登录到phpMyAdmin以后,在主界面的底部,我们发现两条提示信息: 一...

2915
来自专栏KaliArch

快捷安装不同版本Python

1065
来自专栏ZKEASOFT

.Net Core Runtime安装说明

在开发阶段,都是直接安装.Net Core的SDK,但是在部署的时候你还是直接装SDK吗?当然直接装SDK也没什么问题,也可以少一些麻烦。但是如果你像我一样不喜...

66011
来自专栏10km的专栏

cmake:msvc编译第三方库时使用/MT静态库连接c/c++ runtime library

关于在cmake生成msvc工程时静态链接c/c++运行库的问题,很久以前写过一篇博客《cmake设置msvc的运行库(runtime library)塈指定o...

2237

扫码关注云+社区