当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue 键盘回车事件

vue 键盘回车事件

2020年07月27日  | 移动技术网IT编程  | 我要评论

1.第一种情况，input框

<input @keyup.enter="function">

2.在自己封装的组件或者是使用一些第三方的UI库时，会发现并不起效果，这时就需要用到.native修饰符了

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

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();
      }
    }
  }

 

本文地址：https://blog.csdn.net/qq_42323925/article/details/107559648

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网