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 实现基础组件的自动化全局注册
Dec 25 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 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 XML error parsing SOAP payload on line 1
2010/06/17 PHP
如何使用Strace调试工具
2013/06/03 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
详解Vue.js中.native修饰符
2018/04/24 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
Python中endswith()函数的基本使用
2015/04/07 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
对python sklearn one-hot编码详解
2018/07/10 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
python中eval与int的区别浅析
2019/08/11 Python
详解Python 最短匹配模式
2020/07/29 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
学习交流会主持词
2014/04/01 职场文书
学生干部培训方案
2014/06/12 职场文书
创新社会管理心得体会
2014/09/12 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
团员自我评价范文
2015/03/10 职场文书
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js