vue element-ui 绑定@keyup事件无效的解决方法

当使用Vue框架配合Element-UI库进行开发时，有时会遇到在绑定@keyup事件时无效的情况，这是因为Element-UI中某些组件的输入框存在自定义事件，优先于@keyup事件执行，从而导致@keyup事件绑定失效。下面我将为大家详细讲解解决方法：

解决方法

在绑定@keyup事件时，需要加上.native修饰符，这样才能触发原生的keyup事件。

示例说明

示例一：在el-input组件中使用@keyup事件

在使用el-input组件时，如果要监听输入框的键盘输入事件，可以使用@keyup来进行绑定：

<template>
  <el-input v-model="inputValue" @keyup="handleInput"></el-input>
</template>

<script>
  export default {
    data() {
      return {
        inputValue: ''
      }
    },
    methods: {
      handleInput() {
        console.log('inputValue: ', this.inputValue);
      }
    }
  }
</script>

但是，当你开始在输入框中输入内容时，发现handleInput方法没有被触发，这时就需要在@keyup后添加.native修饰符，即：

<template>
  <el-input v-model="inputValue" @keyup.native="handleInput"></el-input>
</template>

<script>
  export default {
    data() {
      return {
        inputValue: ''
      }
    },
    methods: {
      handleInput() {
        console.log('inputValue: ', this.inputValue);
      }
    }
  }
</script>

这样，在输入框中输入内容时，handleInput方法就会被正确地触发。

示例二：在el-autocomplete组件中使用@keyup事件

el-autocomplete组件同样存在自定义事件，当通过键盘输入搜索关键词时，默认情况下@keyup事件也无法触发，此时也需要在@keyup后添加.native修饰符才能正确地触发。

<template>
  <el-autocomplete v-model="inputValue" :fetch-suggestions="querySearch" @keyup.native="handleInput"></el-autocomplete>
</template>

<script>
  export default {
    data() {
      return {
        inputValue: '',
        suggestions: []
      }
    },
    methods: {
      handleInput() {
        console.log('inputValue: ', this.inputValue);
      },
      querySearch(queryString, cb) {
        // do search
      }
    }
  }
</script>

在el-autocomplete组件中，你需要定义querySearch方法来进行搜索，同时在el-autocomplete上绑定@keyup.native事件，这样就可以正确地监听键盘输入事件了。

总结

在使用Vue框架配合Element-UI库进行开发时，如果遇到在绑定@keyup事件时无效的情况，需要在@keyup后添加.native修饰符，让它触发原生的keyup事件。这种方式同样适用于其他的自定义事件。

阅读剩余 49%