Vue的全局按键修饰符

最新推荐文章于 2022-01-30 16:34:58 发布
最新推荐文章于 2022-01-30 16:34:58 发布
阅读量234 收藏
点赞数
分类专栏： vue 文章标签： 自定义按键修饰符
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42309685/article/details/100831231
版权
  • 常见的Vue按键修饰符有
  1. .enter
  2. .tab
  3. esc
  4. left
  5. .up
  6. .right
  7. .down
  8. .delete
  9. .space
    当需要一些其他的按键修饰符的时候，比如f2等，虽然说下面的这种做法也能使用
@keyup.113="add"

但是，这么多keycode编码也记不住，所以vue中可以自定义按键修饰符。

Vue.config.keyCodes.f2=113;

这样就可以直接绑定f2，不用总是记住keycode了

ikun不解释
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE全局监听键盘事件
蔡定努
03-26 8883
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="https://cdn.st...
Vue 按键修饰符处理事件的方法
08-27
如果这些别名不能满足需要，可以通过全局 config.keyCodes 对象自定义按键修饰符别名，例如 `Vue.config.keyCodes.x = 88`。 系统修饰键是指控键、alt 键、shift 键、meta 键等，它们可以与按键组合使用，触发特定...
vue 全局键盘_Vue指令
weixin_42522275的博客
01-01 356
Vue.js 目前是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。(Vue有配套的第三方类库，可以整合起来做大型项目的开发)。基本上鄙人了解到的公司前端百分之60以上都在用Vue，面试必问你特么会三大框架吗？不会这个就好像瘸了一样，整一个项目...
vue 项目设置全局按钮菜单权限
ctAnnice的博客
01-30 1843
这是一个很常见的功能，基本在项目搭建之初，就会考虑这个问题，动态路由菜单和按钮加权限的问题。 网上的相关博客也很多，感觉不太适应自己的需求,今天这篇文章只介绍动态按钮权限，如果有需要的小伙伴就跟着我一起来看看吧 ~ ~ ~ 1.第一步要在vuex存储一个按钮数组 AuthButtons，具体步骤为： 在store/index.js 里： import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); let store = new Vuex.S
loop $作用
qq_46987086的博客
11-17 4329
LOOP $ 的作用是 一直执行当前指令（即LOOP指令），zhi在这里和前一dao句合起来专用，可以用来延属时。 指令格式：LOOP 短标号 delay:mov cx,0f000h loop $ ret 这条指令用于控制重复执行的一系列指令。指令执行前必须事先将重复次数放在CX寄存器中，每执行一次LOOP指令，CX自动减一。如果减一后CX不等于零，则转移到指令中所给定的标号处继续循环；若自动减一后CX=0.，则结束循环，执行LOOP指令后面的指令。 标号 $ 在这里表示当前指令的地址。 ...
vue 全局键盘监听
qq_24495287的博客
04-03 1万+
vue实现键盘监听，使用了控件监听组件时，需要获得控件的焦点才能起作用。 如何实现全局监听时，尝试了有效的方法如下： mounted() 在mounted()中编写监听的快捷键和方法即可实现： 例如监听ctrl+s的组合键， mounted(){ this.loadData() var _this = this; document.onkey...
vue事件修饰符和按键修饰符用法总结
12-03
此外，Vue 还允许我们通过全局 `config.keyCodes` 对象来自定义按键修饰符别名。例如，如果你想用 `f1` 键触发某个操作，可以这样设置： ```javascript Vue.config.keyCodes.f1 = 112; ``` 在2.1.0版本后，Vue ...
一、vue基础语法（轻松入门vue）
01-08
v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v-else、v-else-if10.v-for四、Vue常用特性1. 表单操作基于vue的表单操作...
VUE项目全家桶最新版视频教程.zip
07-12
18-Vue常用指令-v-on按键修饰符(掌握) 19-Vue常用指令-自定义全局指令(掌握) 20-Vue常用指令-自定义指令参数(掌握) 21-Vue常用指令-自定义局部指令(掌握) 22-Vue-计算属性(掌握) 23-Vue-计算属性和函数区别(掌握)......
vue实现给div绑定keyup的enter事件
11-19
Vue.js提供了事件修饰符，如`.stop`、`.prevent`、`.capture`等，`.enter`是用于修饰`keyup`事件，表示只有在用户按下回车键时才会触发绑定的函数。 2. **模板中的事件绑定**： 在Vue的模板中，可以这样绑定事件...
vue监听键盘事件的快捷方法【推荐】
10-18
主要介绍了vue监听键盘事件的快捷方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue中自定义全局按钮修饰符和自定义全局指令
hc2018的博客
11-02 984
最近比较懒 不想打字~我就直接上个图吧 这是自定义全局按钮修饰符：其实那个f2只是绑定的时候需要的名字 跟形参实际意义差不多 关键是后面的键盘码 比如我打个114（f3的键盘码） 我绑定f2 实际上我要按f3才能触发这次事件 这是全局自定义指令 比如下面这个自定义一个自动获取文本框焦点指令 ...
vue中全局绑定一个键盘事件
阿尔叭叭
09-29 1648
全局绑定一个事件： export default { install(Vue, options) { //全局回车键搜索 Vue.prototype.keyEnter = function (vm,functionname,type) { document.onkeydown = function(e) { ...
VUE3.0 使用全局快捷键
bywayboy的专栏
04-27 1461
vue3.0中 使用全局快捷键是比较容易的。 1. 首先编写一个全局快捷键类, import { inject } from "@vue/runtime-core"; const rkey = 'r-shortcut-key' function RKeyMap(){ var map = {}; this.bind = (skey, fn)=>{ map[skey] = fn; return this; } this.evt =.
全局组合按键-老板键
aree的专栏
05-15 908
全局组合按键-老板键 //--------------------------------------------------------------------------- int ALT_CTRL_L=0xB86F; void __fastcall TForm1::FormCreate(TObject *Sender) { if (!RegisterHotKey(this->H
Vue2中的键盘事件
热门推荐
勿忘初心的博客
04-24 4万+
Vue2键盘事件：keydown/keyup... 1.使用 window.onload = function(){ var vm = new Vue({ el:'#box', methods:{ s
Vue全局响应的按键事件
weixin_45501830的博客
01-11 864
问题：Vue怎么做到全局响应按键事件，因为自定义按键事件一般要写在input标签上，且要聚焦在input上才能响应。 思路： 直接在Vue的mounted中监听键盘按键 具体代码 <div id="app"> </div> <script type="text/javascript"> Vue.config.keyCodes.f2 = 113 var vm = new Vue({ el: '#app', data: {
19.键值keyup.某一个键盘键的使用.html
luzhensmart的专栏
11-19 1331
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
vue如何自定义全局/私有按键修饰符、过滤器和指令
control_ling的博客
02-22 652
一、vue中自定义全局按键修饰符？ 前面学习了事件修饰符，那么什么是按键修饰符？ 在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： <input v-on:keyup.enter="submit"> 只有在键盘按键按 Enter（回车）键时，才会触发调用 submit() 方法。 你也可以直接将 KeyboardEve...
vue中事件修饰符和按键修饰符
最新发布
04-02
事件修饰符和按键修饰符是 Vue.js 提供的一种方便的语法糖，用于简化事件处理和按键响应的代码。 事件修饰符用于修改事件的默认行为，例如阻止事件冒泡、阻止默认行为等。常用的事件修饰符包括： - `.stop`: 阻止...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值