vue监听键盘Esc事件

yi碗吃不够

已于 2023-11-30 11:18:56 修改

阅读量5.2k

点赞数 1

文章标签： vue.js javascript 前端

于 2022-07-01 15:47:27 首次发布

本文链接：https://blog.csdn.net/weixin_46194350/article/details/125560197

版权

Vue2监听事件

<template>
  <div>Vue2监听事件</div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    listenEsc(e) {
      if (e.keyCode == 27) {
        console.log("Esc执行");
      }
    },
  },
  mounted() {
    document.addEventListener("keydown", this.listenEsc);
  },
  
  beforeDestroy() {
    // 页面销毁的时候清除监听事件
    document.removeEventListener("keydown", this.listenEsc);
  },
};
</script>

Vue3监听事件

<template><div>Vue3监听事件</div></template>

<script setup lang="ts">
import { onMounted, onUnmounted } from "vue";

const listenEsc = (e: any) => {
  if (e.keyCode == 27) {
    console.log("Esc执行");
  }
};

onMounted(() => {
  document.addEventListener("keydown", listenEsc);
});

onUnmounted(() => {
  // 页面销毁的时候清除监听事件
  document.removeEventListener("keydown", listenEsc);
});

</script>