如何利用键盘添加时间全选及多选

《HTML》部分

<div class="demo-image">

<div

class="block"

style="width: 24%; height: 24%"

@click="changeIndex(index)"

v-for="(item, index) in urls"

:key="index"

:class="{

newchecked: currentIndex === index || currentArr.includes(index),

}"

@contextmenu="openMenu"

ref="detailimg"

>

<el-image

style="width: 100%; height: 100%"

:src="item"

fit="fill"

@click.meta="changeMulti(index)"

></el-image>

</div>

《js部分》-data数据

urls: [

'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',

'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',

'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',

'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',

],

currentIndex: 0, // 现在选中的图片

isshift: false, // 快捷键 shift 是否被按下

isctrl: false, // 快捷键 ctrl 是否被按下

currentArr: [], // 上方div图切是否被多选中，如果多选了就把他的id放到这个列表里面

《js部分》-methods里方法（监听键盘的方法，keyevent这是重点=》有组合键盘和单个键盘模式，changeMulti兼容mac键盘的command配合点击可多选，全选是control+a）

keyevent() {

var that = this;

let code = 0;

let code2 = 0;

document.onkeydown = function(e) {

let evn = e || event;

let key = evn.keyCode || evn.which || evn.charCode;

if (key === 16) {

that.isshift = true;

code = 1;

}

if (key === 17) {

that.isctrl = true;

code = 1;

}

if (key === 27) {

that.nochecked();

}

if (key === 65) {

code2 = 1;

e.preventDefault(); // 阻止浏览器默认的全选行为

}

if (code === 1 && code2 === 1) {

that.checkAll();

//do something

code = 0;

code2 = 0;

}

};

document.onkeyup = function(e) {

if (e.keyCode === 17) {

code = 0;

}

if (e.keyCode === 13) {

code2 = 0;

}

};

// 无组合键盘模式

// document.onkeydown = function(e) {

// //按下键盘

// switch (e.keyCode) {

// case 16:

// that.isshift = true;

// break;

// case 17:

// that.isctrl = true;

// break;

// case 27:

// that.nochecked(); // esc 取消选选项

// break;

// // case 17 && 65:

// // that.checkAll(); // ctrl + a 全选功能

// // break;

// }

// if (e.keyCode === 16) {

// console.log('同事按下了');

// }

// };

// document.onkeyup = function(e) {

// //放弃键盘

// switch (e.keyCode) {

// case 16:

// that.isshift = false;

// break;

// case 17:

// that.isctrl = false;

// break;

// }

// };

},

// 单个选中的文件夹

changeIndex(item) {

this.currentIndex = item;

this.contextMenuVisible = false;

if (this.isctrl) {

this.currentArr.push(item);

}

if (this.isshift) {

this.currentArr.push(item);

console.log(this.currentArr, '数组里的内容');

}

},

// mac键盘选择多个情况

changeMulti(item) {

this.currentArr.push(item);

},

checkAll() {

console.log('全选了');

this.urls.forEach((item, index) => {

this.currentArr.push(index);

});

},

nochecked() {

this.currentIndex = 0;

this.currentArr = [];

},

《js部分》-created（进入页面直接执行监听键盘的函数）

created() {

this.keyevent();

// this.currentArr.push(this.currentIndex);

},