一文浅析部分vue事件修饰符

在项目开发中遇到了vue的键盘事件，以下是项目的代码片段：

<div class="query-form-left">
   <i-Form :model="formItem" inline>
       <form-item  >
           <i-input style="width:200px"  placeholder="名称" v-model="formItem.name" @keyup.enter.native="queryTableDataByAction"></i-Input>
       </form-item>
       <form-item>
           <i-input placeholder="负责人" v-model="formItem.ownerUserName" @keyup.enter.native="queryTableDataByAction"></i-Input>
       </form-item>
       <form-item>    
           <i-Button type="ghost" @click="queryTableDataByAction">查询</i-Button>
       </form-item>
   </i-Form></div>

在代码片段中，发现键盘事件后面总是有 .naitvie，刚开始并不明白是什么原因，查证一番，发现是因为vue 使用的是一套自己的事件传递机制，例如 @click 等事件是经过 vue 封装的。如果想在某个组件的根元素上监听一个原生事件，就要使用 v-on 的修饰符 .native

在上面的代码片段中@keyup.enter 是写在一个封装好的组件上（项目中用的的 iView组件 ），因此，在一些实际上处理 DOM 原生事件的上需要添加额外的标识符.native，如果是直接在input上使用就不需要添加了。

立即学习“前端免费学习笔记（深入）”；

此外，vue 提供了很多的 修饰符。

1、事件修饰符

.stop 阻止单击事件继续传播
.prevent 提交事件不再重载页面
.capture 添加事件监听器时使用事件捕获模式， 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数 ，即事件不是从内部元素触发的
.once 点击事件将只会触发一次
.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发 ，包含 event.preventDefault() 的情况

注：修饰符可以串联 ,使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止对元素自身的点击。

Yodayo

一个专为动漫迷和vTuber打造的AI艺术创作平台、交流社区

下载

2、按键修饰符

可以直接用keycode，但是较难记全，所以Vue提供 了常用的按键别名

.enter 回车键
.tab 制表空格键
.delete (捕获“删除”和“退格”键)
.esc 退出
.space 空格键
.up 向上键
.down 向下键
.left 向左键
.right 向右键

3、系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl .alt .shift .meta

此处只列出了部分的vue事件修饰符，更多更详细的修饰符介绍，可查看 vue官方文档

每天总结一点点……每天收获一点点……每天进步一点点……(＾－＾)