南京电器网站建设中山企业网站

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 = indexconsole.log(this.startClickFileIndex, endClickFileIndex);// if (this.startClickFileIndex != endClickFileIndex) {let start = ''let end = ''// 处理起始点if (this.startClickFileIndex < endClickFileIndex) {start = this.startClickFileIndex - 1end = endClickFileIndex + 1} else {start = endClickFileIndex - 1end = 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.dataListthis.dataList = []this.dataList = arr})// }// this.startClickFile = ''// this.startClickFileIndex = -1} else { // 第一次按着shift点击，仅选中自身this.startClickFile = valuethis.startClickFileIndex = indexthis.dataList[index]['active'] = truevar arr = this.dataListthis.dataList = []this.dataList = arr}} else {clearTimeout(this.timeOut);this.timeOut = setTimeout(() => {this.dataList[index]['active'] = value.active ? !value.active : truevar arr = this.dataListthis.dataList = []this.dataList = arr}, 600)}// this.getCatalog(this.filePath,index,value.active ? !value.active : true)},```