vue 全局键盘_Vue项目给应用绑定键盘快捷键

想必各位前端看官也一定做过这样的需求，给我们的应用某些主要的功能绑定一个快捷键。尤其是工具类的产品，让用户可以使用快捷键操作，能大大提高工具使用效率。

如何绑定快捷键

聪明的你也想到了，Vue 官方文档自有解释：按键修饰符

但是实际实践过的你也可能知道，这种绑定按键事件的方式都是绑定在了当前 ViewModel 上的。也就是模版字符串 template 中，这样就无法自定义一个时机在 JavaScript 中自由调用。不过这样做也有好处，比如当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

这里使用第三方插件 keymaster 来做按键绑定，编程式绑定任意按键。

使用插件

安装

npm i keymaster -S

yarn add keymaster -S

使用

import key from 'keymaster'

// 给按键 A 绑定快捷键

key('a', function(){ alert('you pressed a!') });

// 回调函数返回 false 以阻止浏览器默认事件行为

key('ctrl+r', function(){ alert('stopped reload!'); return false });

// 绑定多个快捷键，做同一件事

key('⌘+r, ctrl+r', function(){ });

定制插件

如果一个函数被使用超过3次以上，我习惯封装一个通用函数，不如直接写成 Vue 中的 plugin 好了。

// @/plugins/shortcut.js

import Vue from 'vue'

import keymaster from 'keymaster'

const bindKeyHandler = fn => {

return () => {

fn()

return false

}

export const shortcut = {

bind: (seed, func) => keymaster(seed, bindKeyHandler(func)),

...keymaster

}

Vue.prototype.$shortcut = shortcut

插件为 Vue.prototype 添加了全局方法 $shortcut，shortcut 扩展了 keymaster “遗散多年”的 bind 方法(绑定按键事件)，我猜 keymaster 没有提供 bind API，可能是因为 bind() 是 JavaScript 内置的方法。为了避免命名冲突或者语法歧义。

绑定事件

vue 全局键盘_Vue项目给应用绑定键盘快捷键相关推荐

seo vue 动态路由_VUE项目SEO问题的解决
1. SEOSEO(搜索引擎优化):搜索引擎优化的中文翻译.使用搜索引擎的规则来提高网站的自然排名相关的搜索引擎.当一个网络爬虫抓取网页的内容,它需要分析的内容页面.要点如下:阅读内容的关键字和描述元 ...
vue全局引入openlayers_vue项目中openlayers绘制行政区划
vue项目中openlayers画行政区划(区域范围),供大家参考,具体内容如下原理在地图上画需要的范围,实际上就是在地图上打上一圈点,然后依次将这些点用线连接,就形成了范围引用相应的ol模块 ...
vue 日期面板_VUE项目中如何方便的转换日期和时间
做项目开发时对各种不同的时间进行处理是一件不可避免的事情,比如Unix时间戳需要转换为具体的时间来显示,或者需要根据给出的时间格式化成想要的形式,接下来就拿目前最流行的VUE框架来详细阐述如何对时间进 ...
vue java 实战_vue项目实战总结篇
这篇文章把小编前段时间做的vue项目,做个完整的总结,具体内容请参考本文. 这次算是详细总结,会从项目的搭建,一直到最后的服务器上部署. 废话不多说了.干货直接上. 一. 必须node环境, 这次就不 ...
vue人员轨迹_Vue项目（vuecli3.0搭建）集成高德地图实现路线轨迹绘制
先看最后实现的效果图高德地图api文档使用 1.在index.html里面引入高德地图js文件 2.引入之后我们就直接可以在vue组件里面使用了创建initMap方法,在mounted钩子函数中 ...
bpmn2 vue 设计器_vue项目中使用bpmn-基础篇
后退前进下载 style="display: inline-block;":file-list="fileList"class="upload-d ...
vue 圆形水波_vue项目百度地图+echarts的涟漪水波效果
先看效果 image.png id="allmap" class="map" ref="map" > import echarts f ...
详解在vue项目当中绑定键盘事件
在vue项目当中,有时会遇到为文本输入框或者button按钮绑定键盘事件,最常见的就是enter回车事件. 按照vue官网给出的方法是: v-on:keyup.enter 简写: @keyup.ent ...
vue绑定键盘事件 ctrl+enter触发事件
公司项目(vue+element)有个需求,是在一个input输入内容后按下Enter键进行搜索查询,查询到得数据显示在表格,勾选表格的选中的数据进行提交(提交按钮的快捷键是Ctrl+Enter键盘) ...

vue 全局键盘_Vue项目给应用绑定键盘快捷键

vue 全局键盘_Vue项目给应用绑定键盘快捷键相关推荐

最新文章

热门文章