《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);
},