ElementUI中控件使用原生事件

1.问题

在开发登录界面时，为了给用户名和密码输入框增加回车事件，直接绑定事件时

@keyup.enter="pwdFocus"，回车事件无法响应，

此时需要给事件加上.native修饰符

@keyup.native.enter="pwdFocus"，这样就可以正常响应回车事件了

2.native关键字解释

native是Vue的关键字，在原生html标签中，可以不用加native关键字，此时可以使用任何html中定义的事件

<div @click="clickRow" @mouseover="hoverRow">行内容</div>
<input type=text @keyup.enter="submitForm" />

但如果使用了Vue组件，此时在组件上定义事件时，默认会调用该组件声明的事件，如ElementUI中的输入框组件，仅定义了input change clear focus blur这几个事件，如果需要监听回车事件，则必须使用native关键字，使用后该事件为组件中根元素的监听事件。

<el-input
    v-model="username"
    placeholder="请输入账号"
    @input="usernameChanged"
    @keyup.native.enter="$refs.password.focus()"
></el-input>

3.Vue事件相关知识

3.1事件修饰符

.prevent

相当于在事件的最后调用event.preventDefault()，阻止当前元素的默认动作，如A标签的跳转动作，input[type=submit]控件的提交表单动作

.stop

通知浏览器停止该事件的冒泡动作。

事件冒泡：当一个元素上的事件被触发时，比如鼠标点击了一个按钮，同样的事件将会在该按钮元素的所有父级／祖先元素上触发。这一个过程就被称为事件冒泡。它是由子级元素先触发，父级元素后触发，由内而外（由下往上）的一个流程。

.capture

该事件在监听时使用捕获模式，即在事件冒泡链上优先触发capture关键字修饰的事件，然后再按冒泡规则触发相应事件

例1：

<div @click="alert('container')">
  <div @click.capture="alert('box')">
    <div @click="alert('div')">
    </div>
  </div>
</div>
<script>
//结果：box, div, container
</script>

 例2：

<div @click.capture="alert('container')">
  <div @click="alert('box')">
    <div @click="alert('div')">
    </div>
  </div>
</div>
<script>
//结果：container, div, box
</script>

.self

仅当事件发生在元素本身时才触发事件，在事件发生在子元素上时不触发

3.2按键修饰符

在监听键盘事件时，我们经常需要检测 keyCode。Vue.js 允许为 v-on 添加按键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，Vue.js 为最常用的按键提供别名

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

• enter
• tab
• delete
• esc
• space
• up
• down
• left
• right

1.0.8+： 支持单字母按键别名。

1.0.17+： 可以自定义按键别名：

 

// 可以使用 @keyup.f1
Vue.directive('on').keyCodes.f1 = 112