vue实现一个获取按键展示快捷键效果的Input组件


Posted in Vue.js onJanuary 13, 2021

遇到一个需求,页面内要自定义快捷键,这就需要可以有地方设置和展示快捷键,找了一圈Element UI发现没有能稍微改改就能用的组件,所以自己动手写了一个。
这个只有快捷键展示功能,快捷键实际绑定生效的话是依赖传回的快捷键数据,由另外的组件处理的。目前只测试了Chrome的环境。

效果如下:

vue实现一个获取按键展示快捷键效果的Input组件

关键点

虽然看起来像是一个Input但在组件内实际上是展示一个标签效果,还需要有删除按钮。这就得在输入框内放下html代码,浏览器的Input组件显然不适合,这就只能自己仿一个类Input组件效果了。

focus、blur、选中高亮效果

非Input这类组件是没有focus、blur、选中高亮效果这些效果的,还好浏览器有预留实现方式,网上也早已有网友提供方案,在div里加上tabindex="0"属性,就能让div获得这些效果。

tabindex属性规定了Tab按键的顺序,写0的话是会按组件默认顺序被选中的,如果写-1则始终无法被选中。因为本身是仿Input组件形式,能被Tab获取也刚好很合理。

然后加上CSS的获取焦点的边框效果、鼠标移动到此显示文本类型指针

.shortcut-key-input {
 cursor: text;
 transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.shortcut-key-input:focus {
 border-color: #188cff;
 box-shadow: 0 0 4px rgba(24, 140, 255, 0.38);
}

文本提示

当没有内容时需要跟Input一样,可以默认显示文本提示。这也是放一个div在里面,用Vue控制,如果输出的标签变量有数据时,就不让此元素显示。

光标闪动效果

这个比较好处理,在类Input里面放一个伪元素,当获取焦点的时候添加此伪元素,然后再给此元素一个CSS3的动画,就有光标闪动的效果了。

@keyframes Blink {
 0% { opacity: 0; }
 100% { opacity: 1; }
}
.shortcut-key-input.cursor::after {
 content: "|";
 animation: Blink 1.2s ease 0s infinite;
 font-size: 18px;
 position: absolute;
 top: 1px;
 left: 8px;
}

按键捕获

按键捕获主要靠keydown事件,其中传回的event里会标记是否按下alt、ctrl(control)等信息,所以做组合按键依赖此信息就可以实现。
因为每次按键都会触发事件,所以要屏蔽掉功能键的事件。代码只实现了一个非功能键的组合,需要多功能键可以另外建立变量判断连续按键的情况然后处理。

handleKeydown(e) {
   const { altKey, ctrlKey, shiftKey, key, code } = e;
   if (!CODE_CONTROL.includes(key)) {
    if (!this.keyRange.includes(code)) return;
    let controlKey = "";
    [
     { key: altKey, text: "Alt" },
     { key: ctrlKey, text: "Ctrl" },
     { key: shiftKey, text: "Shift" }
    ].forEach(curKey => {
     if (curKey.key) {
      if (controlKey) controlKey += "+";
      controlKey += curKey.text;
     }
    });
    if (key) {
     if (controlKey) controlKey += "+";
     controlKey += key.toUpperCase();
    }
    this.addHotkey({ text: controlKey, controlKey: { altKey, ctrlKey, shiftKey, key, code } });
   }
   e.preventDefault();
  },

CODE_CONTROL是另外预设的按键code码集合,方便处理。本来用的是keyCode的,但keyCode已经被废弃了,推荐的是code。
addHotkey就是添加到相应变量的函数,其中主要出判断一下是否有重复的快捷键。
然后预留了一个外部验证的接口,为了多快捷键的时候可以判断是否有重复。
还有一个max接口,可以限制每个组件的快捷键个数。

addHotkey(data) {
   if (this.list.length && this.list.some(item => data.text === item.text)) return;
   if (this.list.length && this.list.length.toString() === this.max.toString()) return;
   if (!this.verify(data)) return;
   this.list.push(data);
  }

在线预览

https://codesandbox.io/s/vue-hotkeyinput-90m2k

以上就是vue实现一个获取按键展示快捷键效果的Input组件的详细内容,更多关于vue 展示快捷键的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue+iview实现分页及查询功能
Nov 17 Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
Vue组件生命周期运行原理解析
Nov 25 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
vue 自定义组件添加原生事件
Apr 21 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 #Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 #Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 #Vue.js
vue自定义组件实现双向绑定
Jan 13 #Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 #Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 #Vue.js
vue 页面跳转的实现方式
Jan 12 #Vue.js
You might like
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
javascript实现的网页局布刷新效果
2008/12/01 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
ajax异步请求详解
2017/01/06 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
python的绘图工具matplotlib使用实例
2014/07/03 Python
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
从Python的源码来解析Python下的freeblock
2015/05/11 Python
Ubuntu下安装PyV8
2016/03/13 Python
python写入已存在的excel数据实例
2018/05/03 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
PyCharm代码格式调整方法
2018/05/23 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
python已协程方式处理任务实现过程
2019/12/27 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
小班开学寄语
2014/04/04 职场文书
行风评议整改报告
2014/11/06 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript