解决Vue中element-ui不能监听input键盘事件的问题

懒人请直接移步下方【解决方案】

【举个栗子】：

<el-input @keyup.enter = "clickEnter" />

在这个输入框中按下回车是不会执行clickEnter方法的。

【问题原因】

查阅源码可见，element-ui是封装式的组件库。部分<el-input>源码如下：

<template>
  <div :class="[type === 'textarea' ? 'el-textarea' : 'el-input',
    inputSize ? 'el-input--' + inputSize : '',
    {
      'is-disabled': disabled,
      ...
    }
    ]"
    @mouseenter="hovering = true" @mouseleave="hovering = false"
  >
    <template v-if="type !== 'textarea'">
      <!-- 前置元素 -->
      <div class="el-input-group__prepend" v-if="$slots.prepend"  tabindex="0">
        <slot name="prepend"></slot>
      </div>
      <input
        :tabindex="tabindex"
        v-if="type !== 'textarea'"
        ...
      >

只截取了开头的小部分代码，但也能看出这是个封装式组件，所以无法直接对其使用原生的键盘事件。

【解决方案】

加上修饰符.native即可
<el-input @keyup.enter.native = "clickEnter" />

【实际应用】

<el-autocomplete
    class="inline-input"
    v-model="searchText"
    :fetch-suggestions="querySearch"
    placeholder="请输入产品型号或资质名称"
    :trigger-on-focus="false"
    @select="handleSelect"
    prefix-icon="el-icon-search"
    @keyup.enter.native="handleSearch"
        >
          <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
        </el-autocomplete>