vue ctrl、shift 键实现多选功能

admin管理员组

文章数量:1535368

<div>
   <div v-for="(item, index) in listData" :key="item.id" :class="item.selected ? 'is-actived-box' : ''" @click="handleItem(item, index)">{{ item.label }}</div>
</div>

data () {
  return {
     listData: [
       { id: 1, label: 'test1', selected: false },
       { id: 2, label: 'test2', selected: false },
       { id: 3, label: 'test3', selected: false },
       { id: 4, label: 'test4', selected: false },
       { id: 5, label: 'test5', selected: false },
       { id: 6, label: 'test6', selected: false },
       { id: 7, label: 'test7', selected: false }
     ],
     isshift: false,
     isctrl: false
   }
 },

 created () {
 	this.keyevent();
 }

methods: {
	keyevent () {
	  var that =this;
	  // 按下键盘
	  document.onkeydown = function(e) { 
		  switch (e.keyCode) {   
		    case 16:           
		      that.isshift = true;     
		      break;     
		    case 17:          
		      that.isctrl = true;        
		      break; 
		  }     
	  };   
	  // 放弃键盘
	  document.onkeyup = function(e) {
	    switch (e.keyCode) {    
	      case 16:           
	        that.isshift = false;      
	        break;        
	      case 17:         
	        that.isctrl = false;     
	        break;       
	    }
	  }
	},
	handleItem (item, index) {
	   if (this.isctrl) {
	     item.selected = !item.selected;     
	     this.$set(this.listData, index, item);     
	   } else if(!this.isctrl&&!this.isshift)  {       
	     this.listData.forEach(data=>{ 
	       if(data.id != item.id) data.selected=false; 
	     });        
	     item.selected = !item.selected;        
	     this.$set(this.listData, index, item);      
	   }
	    if(this.isshift) {        
	     var len =this.listData.length;        
	     var resulindex = -1;        
	     for (let i = len-1; i > -1 ; i--) {        
	       if(this.listData[i].selected) {   
	         resulindex = i;            
	         break;
	       }
	     }        
	     if(resulindex < index) {       
	       for(let i = resulindex; i <= index; i++) {            
	         this.listData[i].selected=true;      
	         this.$set(this.listData, i, this.listData[i]);
	       }
	     } else {
	       for(let i = index; i <= resulindex; i++) {            
	         this.listData[i].selected = true;            
	         this.$set(this.listData, i, this.listData[i]);
	       }
	     }
	   }
	 }
}

本文标签： 多选功能vueCtrlShift