vue组件中ctrl键和shift键操作多选

  
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;       
 }     
 };    }, }
复制代码

• 组件初始化的时候添加对键盘的事件的出发，ctrl的code为17，shift为16
  
• 点击item的时候判断是否有键按下

  if (this.isctrl) {    
      
  item.selected = true;     
  this.$set(this.listData, index, item);     
   } else if(!this.isctrl&&!this.isshift){        
  this.listData.forEach(data=>{          
  data.selected=false;        });        
  item.selected = true;        
  this.$set(this.listData, index, item);      }复制代码

• shift的操作包括从后向前选或是从后向前选

  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]);          }        }      }复制代码

比较简单应急的实现，如果有好的方案，求大神补充