利用vue怎么实现一个获取按键展示快捷键效果的Input组件-创新互联
利用vue怎么实现一个获取按键展示快捷键效果的Input组件?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
成都创新互联公司成立于2013年,我们提供高端成都网站建设、成都网站制作、网站设计、网站定制、全网营销推广、小程序开发、微信公众号开发、成都网站推广服务,提供专业营销思路、内容策划、视觉设计、程序开发来完成项目落地,为石牌坊企业提供源源不断的流量和订单咨询。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); }
看完上述内容,你们掌握利用vue怎么实现一个获取按键展示快捷键效果的Input组件的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
网站题目:利用vue怎么实现一个获取按键展示快捷键效果的Input组件-创新互联
本文来源:http://myzitong.com/article/ejjpj.html