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 option location 页面跳转实现代码
Dec 27 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
如何开发出更好的JavaScript模块
Dec 22 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
浅谈JavaScript面向对象--继承
Mar 20 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
Vue中实现回车键切换焦点的方法
Feb 19 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
用PHP程序实现支持页面后退的两种方法
2008/06/30 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
Javascript的闭包
2009/12/31 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
综合素质的自我鉴定
2013/10/07 职场文书
工作目标责任书
2014/07/23 职场文书
学生检讨书如何写
2014/10/30 职场文书
女方离婚起诉书
2015/05/18 职场文书
暂住证明怎么写
2015/06/19 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
Python+DeOldify实现老照片上色功能
2022/06/21 Python