这里有新鲜出炉的 vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
最近做了两个 vue 的项目,都需要实现全选反选的功能,两个项目用了两种实现方法,第一个项目用 vue 的 computed,第二个项目用指令来实现,用起来,发觉指令更加方便。下面就来介绍如何利用指令来实现全选。
因为刚开始接触 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, 就可以用
来设置 checkAll 的值,用 params 接收绑定指令元素上的属性值 checkData, 也就是需要操作的数组。
- this.set(value)
用
获取使用指令的上下文,调用上下文的
- this.vm
来监听 checkData 的变化,如果 checkData 全部选中,则设置 checkAll 为 true,否则设置 checkAll 为 false。
- $watch
当指令值(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);
- };
总结
来源: http://www.phperz.com/article/17/0505/331990.html