VUE2的ctrl多选和shift多选

template:

           <div v-for="(item, index) in fileList" :id="'f_' + item.scanIndex" :key="item.scanIndex" :class="{'active': selectList.includes(item.scanIndex)}" style="margin-left: 20%;margin-bottom: 10px;margin-top: 10px;float: left;" @click="showBigPic(item)">
                <img :id="'img' + item.scanIndex" :src="item.filePath" border="0" width="80" height="100" style="border: solid 1px #ccc;">
        
              </div>

css:

  .active {
    border: 2px solid blue;
  }

多选

 data() {
    return {
      scanIndex: 1,
      fileList: [], // 文件列表
      selectList: [], // 左侧选择列表
      keyCtrl: false, // 是否按下ctrl键
      keyShift: false, // 是否按下Shift键
      shiftIndex: '', // shift索引
      activeKey: ''

    }
  },
  mounted() {
    // 监听键盘
    window.addEventListener('keydown', this.handleCtrlDown, true)
    window.addEventListener('keyup', this.handleCtrlUp, true)
  },
  methods: {
    // 初始化页面
    init(type) {
      this.selectList = [] // 选择列表
    // 和后台要fileList

    },
     handleCtrlDown(e) { // 是否按下ctrl键
      const key = e.key
      switch (key) {
        case 'Control' :
          if (!this.keyCtrl) {
            this.keyCtrl = true
          }
          break
        case 'Shift' :
          if (!this.keyShift) {
            this.keyShift = true
          }
          break
      }
    },
    handleCtrlUp(e) { // 是否抬起ctrl键
      const key = e.key
      switch (key) {
        case 'Control' :
          if (this.keyCtrl) {
            this.keyCtrl = false
          }
          break
        case 'Shift' :
          if (this.keyShift) {
            this.keyShift = false
          }
          break
      }
    },
    showBigPic(item) {
      if (this.keyCtrl && !this.keyShift) {
        let deleteIndex = null
        for (let i = 0; i < this.selectList.length; i++) {
          if (this.selectList[i] === item.scanIndex) {
            deleteIndex = i
          }
        }
        this.$delete(this.selectList, deleteIndex)
        if (deleteIndex == null) {
          this.selectList.push(item.scanIndex)
        }
      } else if (!this.keyShift) {
        this.selectList = []
        this.selectList.push(item.scanIndex)
      } else if (this.keyShift) {
        if (this.shiftIndex === '' && this.selectList.length === 0) {
          this.shiftIndex = item.scanIndex
          this.selectList.push(item.scanIndex)
        } else {
          // 如果使用shift进行多选
          this.selectList = []
          for (let i = this.shiftIndex > item.scanIndex ? item.scanIndex : this.shiftIndex; i <= (this.shiftIndex > item.scanIndex ? this.shiftIndex : item.scanIndex); i++) {
            this.selectList.push(i)
          }
        }
      }
      this.activeKey = item.scanIndex
      if (!this.keyShift) { // 如果没有按下shift 更新索引
        this.shiftIndex = this.activeKey
      }
    }


  }

按住shift选择开始和结束及中间的,按住ctrl选择之前和现在的,

scanIndex是fileList中对象的索引