VUE---自定义按键修饰符

最新推荐文章于 2023-11-01 22:59:25 发布
最新推荐文章于 2023-11-01 22:59:25 发布
阅读量150 收藏
点赞数
分类专栏： VUE学习 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhihou4689/article/details/99892112
版权
本文探讨了在Vue应用中如何使用全局keyCodes对象自定义按键别名，并重点介绍了如何处理指令下无法获取焦点的问题，包括bind、inserted、update、unbind和componentupdate钩子函数。解决方法提示将指令放入<script></script>标签中。
摘要由CSDN通过智能技术生成

全部的按键别名：

  1. .enter
  2. .tab
  3. .delete(捕获“删除和“”退格”键)
  4. .esc
  5. .space
  6. .up
  7. .down
  8. .left
  9. .right

 

钩子函数：

.bind：只调用一次，指令第一次绑定到元素时调用

.inserted：被绑定元素插入到父节点时调用（父节点存在即可调用，不必存在于document中）

.update：所在组件的VNode更新时调用，但是可能发生在其孩子的VNode更新之前

.unbind：只调用一次，指令与元素解绑时调用

.componentupdate：所在组件的VNode及其孩子的VNode全部更新时调用

通过全局config.keyCodes对象自定义键值修饰符别名

遇见了一个问题，获取不到焦点

 

 

解决办法：需加一个<script></script>,并将directive写入script中

 

 

science的成长之路
关注
专栏目录
Vue-自定义按键修饰符
MrLsss的博客
02-15 603
可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112自动对应按键修饰符 也可以直接使用 KeyboardEvent.key 暴露出来的所有合法按键名作为修饰...
Vue 自定义按键修饰符与自定义按键修饰符别名
weixin_43736435的博客
05-26 618
在监听键盘事件时，我们经常需要检查详细的按键。实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： <!-- 只有在 `key` 是 `Enter` 时调用 `vm.add()` --> <input v-on:keyup.enter="add()"> Vue提供了常用的按键码的别名： .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .righ
自定义按键修饰符Vue.config.keyCode.XX = event.keyCode
binbinhxx的博客
01-07 931
自定义按键修饰符 全局config.keyCodes对象 Vue.config.keyCode.f1 = 112 在Vue.config.keyCodes对象中添加一个自定义的名字，后面跟一个值，这就是自定义的按键修饰符。跟的值是每个按键的唯一标识，每个键都有一个唯一的标识，这个按键值可以通过事件对象keycode来获取 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
[vue] Vue键盘事件
qq_14993591的博客
11-02 1298
1.Vue中常用的按键别名： @keydown 键盘按下时触发 @keypress 键盘按住时触发 @keyup 键盘弹起 @keyup.13 按回车键 @keyup.enter 回车 @keyup.up 上键 @keyup.down 下键 @keyup.left 左键 @keyup.right 右键 @keyup.delete 删除键 获取按键的键码 e.keyCode <div id="root"> <h2>欢迎来到{
vue-自定义全局键盘码
weixin_34289744的博客
10-12 339
1.Vue.config.keyCodes.enter=13; //main.js中定义全局 <template> <div> <input v-model="data1" type="text" @keyup.F12="add"> </div> </template> &lt...
vue中el-input绑定键盘按键(按键修饰符)
10-15
需要注意的是，组合修饰符必须配合系统按键修饰符使用才能生效。 以下是组合修饰符的Vue代码示例： ```html 带上ctrl来找我玩呀 ``` ```javascript let vm = new Vue({ el: '#app', methods: { together...
02-Vue按键修饰符,自定义指令
乐百寿
08-27 678
Vue键盘事件，自定义指令
vue事件修饰符和按键修饰符用法总结
08-29
Vue.js 允许开发者自定义按键修饰符别名。通过在 Vue.config.keyCodes 对象中添加按键修饰符别名，可以扩展 Vue.js 的按键修饰符功能。 例如：Vue.config.keyCodes.f1 = 112 四、鼠标或键盘事件监听修饰符 Vue....
keyCodes
BLOG域名:programb.blog.csdn.net
04-18 282
keyCodes Type: { [key: string]: number | Array<number> } Default: {} Usage: Vue.config.keyCodes = { v: 86, f1: 112, // camelCase won`t work mediaPlayPause: 179, // instead you can u...
Vue.js 键盘修饰符以及自定义键盘修饰符
C.
02-20 683
键盘修饰符以及自定义键盘修饰符 1.x中自定义键盘修饰符【了解即可】 Vue.directive('on').keyCodes.f2 = 113; 2.x中自定义键盘修饰符 通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名： Vue.config.keyCodes.f2 = 113; 使用自定义的按键修饰符： &lt;input type=...
vue的简单使用6-自定义按键修饰符
星月昭铭的博客
05-07 590
在制作网页的时候，常常会使用到各种键盘事件 例如keyUp,当发生键盘抬起的事件时，会被触发，那怎么让其只在特定的按键抬起时才触发呢？ 上个例子 <div id="head"> <input @keyDown="mi"> <p>{{ msg }}</p> </div> <script> let vue1...
Vue指令
GIS_yuhua的博客
01-17 208
1.v-cloak 2.v-html v-text v-on v-bind 注意：通过v-on绑定事件时，在函数名后加小括号即可以传参，并不会自动调用函数。 （1）事件修饰符： .stop 阻止冒泡 .prevent 阻止默认行为（如提交表单的submit，a标签） .capture 实现捕获事件的机制 .self 实现只有点击当前元素时候，才会触发事件处理函数 ...
Vue技术—键盘事件
u013140948的博客
11-19 657
1. Vue中常用的案件别名 回车 => enter 删除 => delete（捕获“删除”和“退格”键） 退出 => esc 空格 => space 换行 => tab（必须配合keydown使用） 上 => up 下 => down 左 => left 右 => right <div id="root"> <input type="text" placeholder="按下回车提示输入" @keyup.e
修饰符
Ammy的成长
01-06 230
一、事件处理方法 1.不传参（自动会有event事件参数。） div id="example-2"> -- `greet` 是在下面定义的方法名 --> on:click="greet">Greetbutton> div> var example2 = new Vue({ el: '#example-2', data: { name: 'Vue.js' },
22. Vue keycodes按键修饰符
DevOps海洋的渔夫@专栏
03-18 2365
需求 在业务开发中，例如：用户登录添加用户名和密码之后，按下回车键完成登录，这个操作就需要绑定按键的keyup事件，并且还要使用按键修饰符来指定按下的键盘按钮。 下面来看看另一个需求来逐步认识一下按钮修饰符。 按键修饰符 在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： <!-- 只有在 `key` 是 `...
VUE键盘事件的触发
最新发布
sddycai的博客
11-01 430
换行 => tab (特殊，必须配合keydown去使用)删除 => delete (捕获“删除”和“退格”键)(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名。回车 => enter。空格 => space。右 => right。
vue-事件修饰符和按键修饰符
热门推荐
heartOfblack 离开了电脑，我不希望我还有病
04-25 1万+
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。.prevent
vue学习笔记（一）关于事件冒泡和键盘事件 以及与Angular的区别
勿忘初心的博客
05-23 3984
一、事件冒泡 方法一、使用event.cancelBubble = true来组织冒泡 methods:{ show1:function(ev){ console.log(ev); alert(1); ev.cancelBubble=true; /*阻止冒
bootstrap 第六章 按钮
涛涛的博客
10-01 329
第六章 按钮 类 描述 .btn 为按钮添加基本样式 – – .btn-default 默认/标准按钮 – – .btn-primary 原始按钮样式（未被操作） – – .btn-success 表示成功的动作 – – .btn-info 该样式可用于要弹出信息的按钮 – – .btn-warning 表示需要谨慎操作的按钮 – – .btn-danger 表示一个危险动作的按钮操作 – – .btn-link 让按钮看起来像个链接
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值