当前位置：首页 > article >正文

基于Vue2用keydown、setTimeout事件实现连续按键(连击)任意键(或组合键)3秒触发自定义事件(以F1键为例)

article 2025/1/20 23:55:54

核心代码

<template></template>
<script>
export default {
  created() {
    //监听弹起快捷键
    addEventListener("keyup", this.keyup);
  },
  destroyed(d) {
    //移除监听弹起快捷键
    removeEventListener("keyup", this.keyup);
  },
  methods: {
    keyup(e) {
      if (e.key === this.$global.version.key) {
        ++this.$global.version.keyupTimes >= this.$global.version.maxTimes &&
          this.$global.version.multiKeyPressCallback();
        this.$global.version.keyupTimes === 1 &&
          setTimeout(
            () => (this.$global.version.keyupTimes = 0),
            1000 * this.$global.version.delaySecond
          );
        e.stopPropagation();
        e.preventDefault();
        return false;
      }
    },
  },
};
</script>

配置文件

export default {

    version: {
        time: "2024年2月6日 17:30:03", //版本时间（长按Pause Break五秒显示）
        key: "F1", //触发快捷键
        multiKeyPressCallback(d) {
            alert(`【更新时间】${this.time}\n（注意校对是否已发布最新代码）`);
        }, //长按结束触发方法
        delaySecond: 3, //多少秒内连续按键
        keyupTimes: 0, //当前按键次数
        maxTimes: 5, //连续按键次数
    },

}

关联长按键盘任意键或组合键

基于Vue2用keydown、keyup事件实现长按键盘任意键(或组合键)3秒触发自定义事件(以F1键为例)-CSDN博客文章浏览阅读101次。【代码】基于Vue2用keydown、keyup事件实现长按键盘任意键（或组合键）3秒触发自定义事件（以Pause/Break键为例）https://blog.csdn.net/qq_37860634/article/details/136047189