<template>
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px"
class="demo-ruleForm login-container" >
<h3 class="title">系統(tǒng)登錄</h3>
<el-form-item prop="account">
<el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="賬號"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="ruleForm2.password" auto-complete="off" placeholder="密碼" @keyup.enter.native="handleSubmit2"></el-input>
</el-form-item>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining" >登錄
</el-button>
</el-form-item>
</el-form>
</template>
@keyup.enter這里必須加上 .native 才能生效.
因?yàn)槟鉆keyup.enter是寫在一個封裝好的組件上
如果你寫在一個input上就不需要.native
至于為什么,請參考vue文檔
@
這個東西實(shí)際上是 v-on
的簡寫,而 v-on
則是對 Vue 的事件體系封裝后的 API 接口。
Vue 的官方文檔中指出了,Vue 使用的是一套自己的事件傳遞機(jī)制,如 @click
等事件是經(jīng)過 Vue 封裝的。因此,在一些實(shí)際上處理 DOM 原生事件的場合才需要添加額外的標(biāo)識符。