vue通过 Ctrl 点击鼠标实现 div 多选操作
针对前端部分,有一个div的列表,想通过按住Ctrl键后点击div实现多选的功能大体思路如下:1 通过拦截控制ctrl的键盘code值,2 在div上添加一个点击事件,将div设置成一个选中的样式,当然,在点击事件里面得判断一下,判断键盘是不是被按下了,没有按下的话,不做任何处理具体代码如下:1 首先先定义变量data() {return {data:[], //数据源列表isCtrl: fals
·
针对前端部分,有一个div的列表,想通过按住Ctrl键后点击div实现多选的功能
大体思路如下:
1 通过拦截控制ctrl的键盘code值,
2 在div上添加一个点击事件,将div设置成一个选中的样式,当然,在点击事件里面得判断一下,判断键盘是不是被按下了,没有按下的话,不做任何处理
具体代码如下:
1 首先先定义变量
data() {
return {
data:[], //数据源列表
isCtrl: false, // 快捷键 ctrl 是否被按下
selectedData: [],
}
}
2 绑定键盘监听事件
// 监听键盘
keyDown() {
// 键盘按下事件
document.onkeydown = (e) => {
// 取消默认事件
e.preventDefault();
//事件对象兼容
let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
// ctrl:17
switch (e1.keyCode) {
case 17:
this.isCtrl= true; // 如果ctrl按下就让他按下的标识符变为true
break;
}
}
// 键盘抬起事件
document.onkeyup = (e) => {
// 取消默认事件
e.preventDefault();
//事件对象兼容
let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
switch (e.keyCode) {
case 17:
this.isCtrl = false; // 如果ctrl抬起下就让他按下的标识符变为false
break;
}
}
},
3 在页面初始化完成后进行触发该事件
created() {
this.keyDown()
}
4 触发点击事件
selectImage(item, index) {
if (this.isCtrl) { // 如果按下的是ctrl
let str = item.id // 这行代码没必要,但是案例是根据我项目改的,就懒得删了
let i = this.selectedState.indexOf(str) // 判断选中列表中是否包含这个点击的div
if (i < 0) {
this.selectedState.push(str) // 不包含就加进去
} else {
this.selectedState.splice(i, 1); // 包含就删,
}
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)