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+vant实现购物车全选和反选功能
Nov 17 Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
vue实现广告栏上下滚动效果
Nov 26 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 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编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
php之CodeIgniter学习笔记
2013/06/17 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
Python与R语言的简要对比
2017/11/14 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
谈谈Python中的while循环语句
2019/03/10 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
python定义类self用法实例解析
2020/01/22 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
建龙钢铁面试总结
2014/04/15 面试题
经销商培训邀请函
2014/01/21 职场文书
职业生涯规划书范文
2014/03/10 职场文书
九一八事变演讲稿
2014/09/05 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
警示教育观后感
2015/06/17 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
Win11 BitLocker 驱动器加密
2022/04/19 数码科技