vue3 键盘事件和禁止F5刷新

最新推荐文章于 2024-07-24 10:39:44 发布

三十一.

最新推荐文章于 2024-07-24 10:39:44 发布

阅读量1.1k

点赞数

文章标签：开发语言 vue 前端

本文链接：https://blog.csdn.net/weixin_45208435/article/details/131224571

版权

在Vue3的应用里，可以在`setup()`函数中监听键盘事件`keydown`，通过判断按键值来阻止F5等键的默认行为，以此实现禁止页面刷新。当检测到F5、F6、F7或F8被按下时，调用`e.preventDefault()`阻止其默认操作，并打印按键信息。

摘要由CSDN通过智能技术生成

vue3 键盘事件和禁止F5刷新

键盘事件禁止需要在页面的生命周期函数created中调用方法。在vue3中setup()相当于created

// 键盘事件
const func1 = () => {
  window.addEventListener(
    "keydown",
    function (e) {
        if (
          e.key === "F5" ||
          e.key === "F6" ||
          e.key === "F7" ||
          e.key === "F8"
        ) {
          e.preventDefault();
        }
        console.log("按键:", e.key, e.keyCode);
    },
    false
  );
};
func1(); //因为setup()即相当于created:  所以直接调用就行了