利用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(){
returnthis.selectCount==this.selectItems.length;
},
set:function(value){
this.selectItems.forEach(function(item){
item.checked=value;
});
returnvalue;
}
},
//选中的数量
selectCount:{
get:function(){
vari=0;
this.selectItems.forEach(function(item){
if(item.checked){
i++;
}
});
returni;
}
},
//选中的数组
checkedGroups:{
get:function(){
varcheckedGroups=[];
this.selectItems.forEach(function(item){
if(item.checked){
checkedGroups.push(item);
}
});
returncheckedGroups;
}
}
}
这种方法用起来不太方便，首先是很难复用，每次要用到的时候都需要写一次computed，其次是selectAll、checkedGroups、selectItems都已经固定，不太灵活。
所以在这次项目中，我用vue的指令重新实现了全选的功能，directive的思路其实跟computed差不多，先上代码：
exportdefault{
'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;
});
}
},
},
};
调用：
<inputtype="checkbox"v-model="checkAll"v-check-all="checkAll"check-data="checkData">
<ul>
<liv-for="itemincheckData">
<inputtype="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){
varself=this;
varcalled=false;
varunwatch=(this._scope||this.vm).$watch(expression,function(val,oldVal){
self.params[key]=val;
//sinceweareinimmediatemode,
//onlycalltheparamchangecallbacksifthisisnotthefirstupdate.
if(called){
varcb=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);
};
总结
以上就是这篇文章的全部内容，有不对的地方，还请大家多多指教。希望这篇文章的内容对大家能有所帮助。