vue 监听回车组件 监听回车登录

vue yekong

vue实现监听回车触发登录,登录后,销毁监听。为了方便复用,将其抽离成一个组件。

组件使用

<monitorEnter @monitorEnter="login"></monitorEnter>

组件代码

/**
* @Author: 858834013@qq.com
* @Name: monitorEnter
* @Date: 2022-07-09
* @Desc: 监听回车
*/
<template>
  <div>
  </div>
</template>
<script>
export default {
  name: "monitorEnter",
  mounted() {
    window.addEventListener('keydown', this.keyDown);
  },
  //销毁事件
  destroyed() {
    window.removeEventListener('keydown', this.keyDown, false);
  },
  methods: {
    keyDown(e) {
      var that = this;
      if (e.keyCode == 13) {
        that.$emit('monitorEnter', 0)
      }
    },
  }
}
</script>

喜欢