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

 4517

这篇文章主要介绍了vue如何实现一个获取按键展示快捷键效果Input组件,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下

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

效果如下:


60028f5da90de.gif


关键点

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

focus、blur、选中高亮效果

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

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

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

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

文本提示

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

光标闪动效果

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

  1. @keyframes Blink {
  2.     0% { opacity: 0; }
  3.     100% { opacity: 1; }
  4. }
  5. .shortcut-key-input.cursor::after {
  6.     content: "|";
  7.     animation: Blink 1.2s ease 0s infinite;
  8.     font-size: 18px;
  9.     position: absolute;
  10.     top: 1px;
  11.     left: 8px;
  12. }

按键捕获

按键捕获主要靠keydown事件,其中传回的event里会标记是否按下alt、ctrl(control)等信息,所以做组合按键依赖此信息就可以实现。

因为每次按键都会触发事件,所以要屏蔽掉功能键的事件。代码只实现了一个非功能键的组合,需要多功能键可以另外建立变量判断连续按键的情况然后处理。

  1. handleKeydown(e) {
  2.     const { altKey, ctrlKey, shiftKey, key, code } = e;
  3.     if (!CODE_CONTROL.includes(key)) {
  4.         if (!this.keyRange.includes(code)) return;
  5.         let controlKey = "";
  6.         [
  7.             { key: altKey, text: "Alt" },
  8.             { key: ctrlKey, text: "Ctrl" },
  9.             { key: shiftKey, text: "Shift" }
  10.         ].forEach(curKey => {
  11.             if (curKey.key) {
  12.                 if (controlKey) controlKey += "+";
  13.                     controlKey += curKey.text;
  14.                 }
  15.             });
  16.             if (key) {
  17.                 if (controlKey) controlKey += "+";
  18.                 controlKey += key.toUpperCase();
  19.             }
  20.             this.addHotkey({ text: controlKey, controlKey: { altKey, ctrlKey, shiftKey, key, code } });
  21.         }
  22.     e.preventDefault();
  23. },

CODE_CONTROL是另外预设的按键code码集合,方便处理。本来用的是keyCode的,但keyCode已经被废弃了,推荐的是code。

addHotkey就是添加到相应变量的函数,其中主要出判断一下是否有重复的快捷键。

然后预留了一个外部验证的接口,为了多快捷键的时候可以判断是否有重复。

还有一个max接口,可以限制每个组件的快捷键个数。

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

在线预览:https://codesandbox.io/s/vue-hotkeyinput-90m2k

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


本文网址:https://www.zztuku.com/detail-8610.html
站长图库 - vue实现一个获取按键展示快捷键效果的Input组件
申明:如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐