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

《HTML》部分

<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);

如何利用键盘添加时间全选及多选相关推荐

vue+elementUI 添加多个可以全选的多选框
elementUI-checkbox官网:https://element.eleme.cn/#/zh-CN/component/checkbox 一.要做上面这种效果,首先要了解全选框中indeter ...
android利用EpMedia给录像添加时间水印
做出来的例子效果如下: 第一步:集成EpMedia, 步骤在大神的github上都有,地址如下: https://github.com/yangjie10930/EpMedia 添加时间水印,我的方法 ...
如何用python进行相关性分析_如何利用python进行时间序列分析
题记:毕业一年多天天coding,好久没写paper了.在这动荡的日子里,也希望写点东西让自己静一静.恰好前段时间用python做了一点时间序列方面的东西,有一丁点心得体会想和大家分享下.在此也要特别 ...
Python数据库添加时间
利用pymysql往数据库中添加时间字段的方法: 1.导入datetime和pymysql: 安装:pip install pymysql, datetime是内置 2.写入SQL语句: 向对应的字段 ...
UE4学习-虚幻4帮助手册、通过蓝图实现动画效果、添加时间轴、添加声音、C++和蓝图事件关联
文章目录虚幻4帮助手册把一个对象转换成蓝图类 C++和蓝图的关联添加时间轴修改defaultPawn 修改door的事件图标给场景添加声音虚幻4帮助手册虚幻4帮助手册虚幻4帮助手册虚 ...
sql两个时间之间的小时差_2年级学生每天上学路上有两个小时车程，该如何利用好这个时间？-知乎亲子热点快报/2020/09/04...
为了享受到更好的教育资源,许多家长会选择让孩子入读离家较远的学校,与此同时路上耗费的大量时间也让家长烦恼不已.既不想让孩子劳累过度,也不愿时间被白白浪费.你家孩子在上学路上常常会做些什么?你有什么好的 ...
在 jquery repeater 中添加设置日期,下拉,复选框等控件
JQueryElement 更新到了 3.5.1, 今天给大家主要讲下如何在 Repeater 的模板中添加设置一些控件. 由于精力有限, 不能在多个博客中保证文章的同步, 可在如下地址查看最新内容, ...
利用RunLoop空闲时间执行预缓存任务
利用RunLoop空闲时间执行预缓存任务最近在做高度自适应的UITableView的时候,使用了一个FDTemplateLayoutCell的开源组件. 它的主要原理是利用RunLoop空闲时间执行 ...
小实操（3）: 利用键盘事件实现小人快跑
** 实例: 利用html表单和js的数学对象及函数做一个有验证码的简单登录表单实操:利用日期对象和方法以及其他相关知识实现简单的钟表功能 ....... js学习中的小实操(目录) ** ...

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

如何利用键盘添加时间全选及多选相关推荐

最新文章

热门文章