Vue 按键修饰符处理事件的方法


Posted in Javascript onMay 04, 2018

按键修饰符

在 PC 端开发时, 我们常常会遇到类似的需求, 比如用户按下 enter 键时提交表单, 没有用按键修饰符时, 我们可能会去监听键盘事件, 根据 keyCode 的值加以判断

Vue 新增按键修饰符和系统修饰符来处理类似事件

/** 提交表单 */
<template>
  <div class="demo">
    电话号码:
    <input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.13="handleSubmit" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      phone: '' // 电话号码
    }
  },
  methods: {

    // TODO 提交电话号码
    handleSubmit () { alert(this.phone) }
  }
}
</script>

要记住所有的 keyCode 值比较困难, 所以 Vue 为常用的按键提供了别名

<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.enter="handleSubmit" />

常见按钮别名

enter tab delete esc space up down left right

如果这些别名不能满足需要的话, 可以通过全局 config.keyCodes 对象自定义按键修饰符别名

Vue.config.keyCodes.x = 88

你也可以将 keyboardEvent.key 暴露的按键名转换为 kebab-case 来作为修饰符, 以下两种修饰符都能触发 handleSubmit 事件

<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.right="handleSubmit" />
<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.arrow-right="handleSubmit" />

系统修饰键

有时候我们需要配合系统修饰键共同触发事件, 这里要注意的是, 单独按下系统修饰键是不会触发相应事件的

系统修饰键包含 ctrl alt shift meta 键, 对于不同的键盘, 这四个系统修饰键对应各有不同, 对于 mac 系统键盘, meta 键对应 command 键, 在 windows 系统键盘中对应 ⊞ 键

在下面的例子中, 当 control 和 v 键共同作用时, 才会触发 handleSubmit 事件

<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.ctrl.v="handleSubmit"/>

有时候我们需要精确匹配到按键组合时才触发相应事件, 在下面的例子中, 当且仅当 control 和 v 键共同作用时, 才会触发 handleSubmit 事件

<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.ctrl.v.exact="handleSubmit"/>

总结

以上所述是小编给大家介绍的Vue 按键修饰符处理事件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
vue mint-ui tabbar变组件使用
May 04 #Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 #Javascript
原生javascript AJAX 三级联动的实现代码
May 04 #Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 #Javascript
vue裁切预览组件功能的实现步骤
May 04 #Javascript
详解vue组件基础
May 04 #Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 #Javascript
You might like
window.ActiveXObject使用说明
2010/11/08 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python实现各种排序算法的代码示例总结
2015/12/11 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
Python BS4库的安装与使用详解
2018/08/08 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
Python删除n行后的其他行方法
2019/01/28 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
司法建议书范文
2014/05/13 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
环卫工作汇报材料
2014/10/28 职场文书
异地恋情人节寄语
2015/02/28 职场文书
鸡毛信观后感
2015/06/11 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
教你怎么用Python操作MySql数据库
2021/05/31 Python