快捷導(dǎo)航

vue鍵盤事件點(diǎn)擊事件加native操作

更新時(shí)間：2020年07月27日 11:39:56 作者：墨咎

這篇文章主要介紹了vue鍵盤事件點(diǎn)擊事件加native操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

如下所示：

<el-card class="box-card animated flipInY">
   <el-form :model="ruleForm2" :label-position="labelPosition" status-icon :rules="rules2" ref="ruleForm2" label-width="50px" class="demo-ruleForm">
    <h3 class="login_title">系統(tǒng)登錄</h3>
    <el-form-item label="賬號" prop="account">
     <el-input type="text" v-model="ruleForm2.account" @keyup.native.enter="handleSubmit2" auto-complete="off" placeholder="賬號"></el-input>
    </el-form-item>
    <el-form-item label="密碼" prop="checkPass">
     <el-input type="password" v-model="ruleForm2.checkPass" @keyup.native.enter="handleSubmit2" auto-complete="off" placeholder="密碼"></el-input>
    </el-form-item>
    <el-checkbox label="記住密碼" v-model="checked" class="remember">記住密碼</el-checkbox>
    <el-form-item >
     <el-button type="primary" class="login_btn" @click.native.prevent="handleSubmit2" :loading="logining">登錄</el-button>
    </el-form-item>
   </el-form>
  </el-card>

如上代碼，后臺管理系統(tǒng)的登錄。在賬號和密碼中加入了鍵盤enter事件，監(jiān)聽時(shí)需要加.native才能正確使用；下面按鈕的點(diǎn)擊事件同樣要加.native才能正常使用。

參考官方文檔：

你可能有很多次想要在一個(gè)組件的根元素上直接監(jiān)聽一個(gè)原生事件。這時(shí)，你可以使用 v-on 的 .native 修飾符：

<base-input v-on:focus.native="onFocus"></base-input>

在有的時(shí)候這是很有用的，不過在你嘗試監(jiān)聽一個(gè)類似 <input> 的非常特定的元素時(shí)，這并不是個(gè)好主意。比如上述 <base-input> 組件可能做了如下重構(gòu)，所以根元素實(shí)際上是一個(gè) <label> 元素：

<label>
 {{ label }}
 <input
  v-bind="$attrs"
  v-bind:value="value"
  v-on:input="$emit('input', $event.target.value)"
 >
</label>

這時(shí)，父級的 .native 監(jiān)聽器將靜默失敗。它不會(huì)產(chǎn)生任何報(bào)錯(cuò)，但是 onFocus 處理函數(shù)不會(huì)如你預(yù)期地被調(diào)用。

為了解決這個(gè)問題，Vue 提供了一個(gè) $listeners 屬性，它是一個(gè)對象，里面包含了作用在這個(gè)組件上的所有監(jiān)聽器。例如：

{
 focus: function (event) { /* ... */ }
 input: function (value) { /* ... */ },
}

有了這個(gè) $listeners 屬性，你就可以配合 v-on="$listeners" 將所有的事件監(jiān)聽器指向這個(gè)組件的某個(gè)特定的子元素。對于類似 <input> 的你希望它也可以配合 v-model 工作的組件來說，為這些監(jiān)聽器創(chuàng)建一個(gè)類似下述 inputListeners 的計(jì)算屬性通常是非常有用的：

Vue.component('base-input', {
 inheritAttrs: false,
 props: ['label', 'value'],
 computed: {
  inputListeners: function () {
   var vm = this
   // `Object.assign` 將所有的對象合并為一個(gè)新對象
   return Object.assign({},
    // 我們從父級添加所有的監(jiān)聽器
    this.$listeners,
    // 然后我們添加自定義監(jiān)聽器，
    // 或覆寫一些監(jiān)聽器的行為
    {
     // 這里確保組件配合 `v-model` 的工作
     input: function (event) {
      vm.$emit('input', event.target.value)
     }
    }
   )
  }
 },
 template: `
  <label>
   {{ label }}
   <input
    v-bind="$attrs"
    v-bind:value="value"
    v-on="inputListeners"
   >
  </label>
 `
})

現(xiàn)在 <base-input> 組件是一個(gè)完全透明的包裹器了，也就是說它可以完全像一個(gè)普通的 <input> 元素一樣使用了：所有跟它相同的特性和監(jiān)聽器的都可以工作。

這里直接將官方文檔copy過來了，也就是說當(dāng)我們要監(jiān)聽組件的鍵盤事件或者點(diǎn)擊事件的時(shí)候是不需要加.native的，而監(jiān)聽組件的就需要加.native才能使用了；但當(dāng)你需要監(jiān)聽的內(nèi)容是組件的子元素的時(shí)候.native也是不會(huì)生效的，此時(shí)官方又給了處理的辦法就是使用v-on="$listeners"。

補(bǔ)充知識：Vue 關(guān)于@keyup.enter.native

看代碼的時(shí)候遇到了