Vue中动态绑定自定义快捷键

主要还是通过Mousetrap.bind来绑定，先了解一下基础用法

Mousetrap.bind

单个绑定：

Mousetrap.bind('/', _focusSearch);

多个绑定：

Mousetrap.bind(['ctrl+s', 'command+s'], function(e) {_saveDraft(); });

自定义动态绑定

先将快捷键和对应的方法需要参数存入一个Map中，Key为快捷键，Value为所需参数

vue的js代码块，mounted()方法块中，定义方法：

     let _this = this;document.onkeydown = function (e) {let key = window.event.keyCode;window.event.preventDefault() //关闭浏览器默认快捷键// 是否存在快捷键map中，是则绑定if(_this.keyboardMap.get(e.key)!=null && typeof _this.keyboardMap.get(e.key) != "undefined"){Mousetrap.bind(e.key,_this.marksKeyboard(_this.keyboardMap.get(e.key)))}};

以上

Vue中动态绑定自定义快捷键相关推荐

vue中动态绑定背景图, 图片水平垂直居中
vue中动态绑定背景图,并且使宽高不等的图片水平垂直居中外层父元素固定宽高,让图片垂直居中的方法 <div style="width:200px;height:200px;" ...
Vue学习笔记：Vue中封装自定义步骤条实现上下一步
Vue中封装自定义步骤条实现上下一步效果图: 如上图:在VUE中实现效果,VUE+Element,ant都有封装好的UI,直接引用就好了: 这里,觉得样式不符合UI设计,所以自定义封装了一个步骤条 ...
「后端小伙伴来学前端了」关于Vue中的自定义事件，组件绑定自定义事件实现通信
傍晚的月亮前言原本这篇打算写Vue中的那个全局事件总线的原理,但是发现自己少写了这个自定义事件,不讲明白这个自定义事件的操作,不好写全局事件原理,于是就有了这篇文章拉. 一.v-on指令要讲自定 ...
vue导入音乐_【vlog制作】不经电脑，如何在VUE中导入自定义音乐
VUE按不同风格.节气/节日.每月精选和流行曲集设置了多个音乐库,用户在剪辑视频的时候可以在库中挑选BGM,省掉了找音乐的麻烦,对于新手用户尤为贴心.然而对于频繁使用VUE剪辑视频的用户来说,原配音乐 ...
Revit中如何自定义快捷键
最佳的绘图方式是左手键盘,右手鼠标,使用快捷键将大大提高绘图效率,Revit同样提供了自定义绘图工具快捷键的功能(Revit2011及以后版本),有两种方式调出自定义快捷键窗口,第一种是Revit窗口 ...
vue 中动态绑定class 和 style的方法
先列举一些例子 :class="['content',{'radioModel':checkType}]" :class="['siteAppListDirNode',{ ...
Vue中实现自定义excel下载
最近在工作中遇到一个需求,就是需要在前端实现一个错误模板Excel的下载功能. 实现下载有两种方式,一种是后端生成一个excel,放在服务器指定目录下,然后前端直接去后端拿.第二种是后端传给前端一个j ...
vue中通过自定义指令将汉字转化为首字母大写、首字母小写、大写、小写的拼音
使用情景: 在文本框中输入内容,例如姓名在页面中将姓名转化为姓名的拼音,包括大写拼音.小写拼音.首字母大写拼音.大写拼音缩写.小写拼音缩写新建一个 pinyin.js 文件这是一串又臭又长的un ...
Vue中使用自定义过滤器转换Unix时间戳
从后台得到的json数据中使用了unix格式的时间戳,前台使用vue展示的时候可以用过滤器对模板中的标签进行处理,很是方便,实现过程: 1.注册自定义过滤器 <script>//注册自定义 ...
vue中如何自定义指令
目录一. 什么是自定义指令二. 如何自定义指令三.应用场景实现输入框防抖图片懒加载一键 Copy的功能拖拽下拉菜单相对时间转换一. 什么是自定义指令我们看到的v-开头的行内属性, ...

Vue中动态绑定自定义快捷键

Mousetrap.bind

自定义动态绑定

Vue中动态绑定自定义快捷键相关推荐

最新文章

热门文章