html:
//全选按钮
<li class="choice_fme">
<div @click="checkAll" v-bind:class='[!isCheckAll ? "not_pitch_on" : "pitch_on"]'></div>
</li>
//列表
<ul class="msge_list clearfix" v-for="(item,index) in messageItems" :key="index">
<li class="choice_fme">
<div v-bind:class='[!isCheck ? "not_pitch_on" : "pitch_on"]' @click="chooseOrder($event)"></div>
</li>
</ul>
//全选按钮
<li class="choice_fme_fast">
<div @click="checkAll" v-bind:class='[!isCheckAll ? "not_pitch_on" : "pitch_on"]'></div>
</li>
js:
export default {
data(){
return{
messageItems:"",//获取到的数组
isCheck:false, //多选按钮
isCheckAll:false,//全选按钮
checkAllNum:0, //选中数量
}
},
methods:{
//多选
chooseOrder:function(e){
if (e.target.className.indexOf("pitch_on") == 0) {
e.target.className = "not_pitch_on" //未选中按钮样式
if( this.checkAllNum>0){
this.checkAllNum -=1
}
}else{
e.target.className = "pitch_on";//选中按钮样式
this.checkAllNum +=1;
}
if(this.checkAllNum == this.messageItems.length){
this.isCheckAll = true
this.isCheck = true
}else if(this.checkAllNum !== this.messageItems.length){
this.isCheckAll = false;
}
},
//全选
checkAll:function(){
if(this.isCheckAll==false){
this.checkAllNum = this.messageItems.length;
this.isCheckAll = true;
this.isCheck = true
}else if(this.isCheckAll==true){
this.isCheck = false
this.checkAllNum = 0
this.isCheckAll = false;
}
},
},
}
css:
.not_pitch_on{
background: url(../../../common/images/k-1.png) no-repeat;
}
.pitch_on{
background: url(../../../common/images/k-2.png) no-repeat !important;
}