美文网首页
vue 第三方的UI库回车搜索不起效果

vue 第三方的UI库回车搜索不起效果

作者: 李小白呀 | 来源:发表于2021-07-02 21:13 被阅读0次

1.input框

<input @keyup.enter="function">

2.在使用一些第三方的UI库时,会发现并不起效果,这时就需要用到.native修饰符了

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

native的作用是监听根元素的监听事件,其实就是 element 已经将input进行了封装,使用 native 进行转成原生的事件,本来是原生,加上 native 是不起任何作用的

3.如果想要绑定的组件太多,可以对键盘进行监控

  mounted() {
    // 绑定enter事件
    this.enterKeyup();
  },
  destroyed() {
    // 销毁enter事件
    this.enterKeyupDestroyed();
  },
  methods:{
    enterKeyupDestroyed() {
      document.removeEventListener("keyup", this.keyupHandle);
    },
    enterKeyup() {
      document.addEventListener("keyup", this.keyupHandle);
    },
    // 键盘搜索
    keyupHandle(e) {
      if (e.keyCode === 13) {
        this.searchHandle();
      }
    }
  }

相关文章

网友评论

      本文标题:vue 第三方的UI库回车搜索不起效果

      本文链接:https://www.haomeiwen.com/subject/rqyyultx.html