element-ui里面大量使用el-input，如何在项目全局设置@keyup.enter.native事件？

Question

目前项目里面大量使用了element-ui里面的el-input。现在需要对所有的el-input组件添加enter事件，请问有没有全局注册的方式添加@keyup.enter.native事件，一个一个页面去添加@keyup.enter.native太麻烦了，有大佬知道吗

Answer 1

document.addEventListener('keyup', e => {
    // 在这里判断 是否是回车键 && e.target 是否是 el-input
})

Answer 2

可以试试 把el-input封装一层，加上@keyup.enter.native事件，并暴露出去。在需要使用的地方直接使用封装后的input，就可以避免多次添加@keyup.enter.native事件了。

Answer 3

写个mixin，或者重写el-input然后覆盖掉原组件

Answer 4

之前也遇到过一个 产品提出的 bug 在 edge 浏览器下,输入 / 会有智能提示.产品想去除这个提示
https://juejin.cn/post/701805... 把element-input 源码改了~ 可以参考下

Answer 5

在el-input的基础上二次封装吧,然后通过$attr以及$listeners传递参数以及事件

<template>
  <CInput v-on="$listeners" v-bind="$attr" @keyup.enter.native="doSome"></CInput>
</template>

<script>
import CInput from 'el-input';

...
...
methods: {
  doSome() {
    // do something
  }
}
...
...
</script>

然后再在ElementUI引入后去覆盖一下el-input,大致就是上诉这个思路吧