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 相关文章推荐
JS处理VBArray的函数使用说明
May 11 Javascript
JS 显示当前日期与时间的代码
Mar 24 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
javascript实现简易数码时钟
Mar 30 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 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
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
小程序云开发实战小结
2018/10/25 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
python实现中文输出的两种方法
2015/05/09 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
外贸业务员的岗位职责
2013/11/23 职场文书
大学生军训感想
2014/02/16 职场文书
环保志愿者活动总结
2014/06/27 职场文书
村创先争优活动总结
2014/08/28 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书