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

  • Z时代
  • 2024-02-22
  • 分类：IT

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

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

回答：

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

回答：

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

回答：

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

回答：

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

回答：

在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,大致就是上诉这个思路吧

以上是 element-ui里面大量使用el-input，如何在项目全局设置@keyup.enter.native事件？ 的全部内容， 来源链接： utcz.com/p/936625.html

回到顶部