el-input的回车监听事件，回车调用函数（Vue）

在Vue中使用elment-ui的时候，用了el-input，想要添加回车也可以调用方法，添加了@keyup.enter.native

最后代码如下：

    <div id="inputNumber">
      <el-input
        clearable
        placeholder="请输入"
        v-model="number"
        @keyup.enter.native="search"
      >
        <i
          slot="prefix"
          class="el-input__icon el-icon-search"
          @click="search"
        ></i>
      </el-input>
    </div>

@keyup.enter.native就是element-ui封装过后可以用来调用回车事件的，回车是针对Input的，所以放在了el-input的tag里，然后在图标处用了click事件直接进行搜索的。用el-button也是一样的。

下面是el-input回车事件和button点击事件的代码：

    <div id="inputNumber">
      <el-input
        clearable
        placeholder="请输入"
        v-model="number"
        @keyup.enter.native="search"
      >
        <el-button
          @click="search"
        >搜索</el-button>
      </el-input>
    </div>

单单input回车的话，里面就不用加啦：

    <div>
      <el-input
        clearable
        placeholder="请输入"
        v-model="number"
        @keyup.enter.native="search"
      >
      </el-input>
    </div>

最后

以上就是美丽大象为你收集整理的el-input的回车监听事件，回车调用函数（Vue）的全部内容，希望文章能够帮你解决el-input的回车监听事件，回车调用函数（Vue）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。