vue通过click和shift实现连续多选功能

vue通过click和shift实现连续多选功能

思路

1. 判断是否是shift+click

2. 判断是否是第一次进行shift + click点击

2.1 若是第一次shift+click点击，则选中当前点击

2.2 若是多次shift+click点击，则进行连续多选操作

3. 若仅为click点击，则进行单击操作

  selectFiles(e, value, index) {
      if (e.shiftKey) { // 点击的时候，按着shift键
        if (this.startClickFile) { // 第二次（或多次）按着shift点击，进行连续多选
          const endClickFileIndex = index
          console.log(this.startClickFileIndex, endClickFileIndex);

          // if (this.startClickFileIndex != endClickFileIndex) {
          let start = ''
          let end = ''
          // 处理起始点
          if (this.startClickFileIndex < endClickFileIndex) {
            start = this.startClickFileIndex - 1
            end = endClickFileIndex + 1
          } else {
            start = endClickFileIndex - 1
            end = this.startClickFileIndex + 1
          }
          // 将起始点以及中间的内容选中
          this.dataList.forEach((item, i) => {
            if (i > start && i < end) {
              this.dataList[i]['active'] = true
            } else {
              this.dataList[i]['active'] = false
            }
            var arr = this.dataList
            this.dataList = []
            this.dataList = arr
          })
          // }
          // this.startClickFile = ''
          // this.startClickFileIndex = -1
        } else { // 第一次按着shift点击，仅选中自身
          this.startClickFile = value
          this.startClickFileIndex = index
          this.dataList[index]['active'] = true
          var arr = this.dataList
          this.dataList = []
          this.dataList = arr
        }
      } else {
        clearTimeout(this.timeOut);
        this.timeOut = setTimeout(() => {
          this.dataList[index]['active'] = value.active ? !value.active : true
          var arr = this.dataList
          this.dataList = []
          this.dataList = arr
        }, 600)
      }


      // this.getCatalog(this.filePath,index,value.active ? !value.active : true)
    },```