vue 通过 Ctrl 、Shift 键 + 点击鼠标实现 div 多选操作
前言
我在做东西的时候有这样一个需求,就是有一个div的列表,想通过按住Ctrl键后点击div实现多选的功能,在一个是按住 Shift键都点击前后两个div选中区域的效果。
就是选择下面图片,每个图片包含在一个div下面。
逻辑
其实大体的逻辑就是:
- 进入页面,开启键盘监听事件,监听 Ctrl 键和 Shift 键的按下和抬起事件,因为需要在按住这两个键的时候才可以实现多选功能。
- 在div上添加一个点击事件,将div设置成一个选中的样式,当然,在点击事件里面得判断一下,判断键盘是不是被按下了,没有按下的话,不做任何处理。
就是这么简单的问题。
接下来就是相关主要代码的编写问题,因为每个人的项目和需求是不一样的,所以我就简单分享一下自己的主要代码逻辑。
代码
首先在vue项目里面定义几个变量哈。
data() {
return {
tableData: [],
isshift: false,
isctrl: false,
selectedState: [],
shiftNum: '',
}
}
其次有一个键盘监听事件
keyDown() {
document.onkeydown = (e) => {
e.preventDefault();
let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
switch (e1.keyCode) {
case 16:
this.isshift = true;
break;
case 17:
this.isctrl = true;
break;
}
}
document.onkeyup = (e) => {
e.preventDefault();
let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
switch (e.keyCode) {
case 16:
this.shiftNum = ''
this.isshift = false;
break;
case 17:
this.isctrl = false;
break;
}
}
},
这样ctrl和shift键的监听事件就完成了,上面的方法在页面初始化完成的时候调用一下子哈,别忘了。
activated() {
this.keyDown()
}
接下来就是点击小div的逻辑了。
给小div一个点击事件,我还写吗?都知道哈,写一下子吧, 不写样式了,当然循环的时候不要用index,我这瞎写的,不要计较哈,分享一下,主要是说多选功能。
<div v-for="(item, index) in tableData" :key="index">
<div @click="selectImage(item, index)">
</div>
</div>
好了,大体就是这个意思,然后点击的时候把这个数据对象传进去,里面包含着一个表示这个div的唯一标识符id。
然后就是最重要的多选的逻辑处理。
selectImage(item, index) {
if (this.isctrl) {
let str = item.id
let i = this.selectedState.indexOf(str)
if (i < 0) {
this.selectedState.push(str)
} else {
this.selectedState.splice(i, 1);
}
} else if (this.isshift) {
if (this.shiftNum === '') {
this.shiftNum = index
let str = item.id
let i = this.selectedState.indexOf(str)
if (i < 0) {
this.selectedState.push(str)
} else {
this.selectedState.splice(i, 1);
}
} else {
if (this.shiftNum > index) {
for (let j = index; j <= this.shiftNum; j++) {
let str = this.tableData[j].id
let i = this.selectedState.indexOf(str)
if (i < 0) {
this.selectedState.push(str)
}
}
} else {
for (let j = this.shiftNum; j <= index; j++) {
let str = this.tableData[j].id
let i = this.selectedState.indexOf(str)
if (i < 0) {
this.selectedState.push(str)
}
}
}
}
}
},
ok,这样就可以了。
选中样式的话我就不写了,根据自己的喜好自己写就可以了,可以根据div的id是否包含在selectedState数组里面进行判断是否被选中。
太厉害了我!哈哈哈哈!!!
下面是我做的项目的大体样式,主要就是上边的逻辑。
|