Vue中处理全局快捷键的实用技巧小结

<template>
  <div @keydown="handleKeyDown" tabindex="0">
    试试按下键盘上的按键！
  </div>
</template>

<script>
export default {
  methods: {
    handleKeyDown(event) {
      console.log(`按下的键是: ${event.key}`);
    }
  }
}
</script>

<style scoped>
div {
  width: 300px;
  height: 100px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px auto;
  font-size: 18px;
  outline: none;
}
</style>

<template>
  <div @keydown="handleKeyDown" tabindex="0">
    按下 Ctrl + S 保存
  </div>
</template>

<script>
export default {
  methods: {
    handleKeyDown(event) {
      if (event.ctrlKey && event.key === 's') {
        event.preventDefault(); // 阻止默认的保存行为
        this.saveData();
      }
    },
    saveData() {
      console.log('数据已保存！');
      // 这里可以加入实际的保存逻辑，例如调用 API
    }
  }
}
</script>

npm install mousetrap

<template>
  <div>
    使用 Mousetrap 监听快捷键
  </div>
</template>

<script>
import Mousetrap from 'mousetrap';

export default {
  mounted() {
    Mousetrap.bind('ctrl+s', this.saveData);
  },
  methods: {
    saveData() {
      console.log('使用 Mousetrap 保存数据！');
      // 这里可以加入实际的保存逻辑，例如调用 API
    }
  },
  beforeDestroy() {
    Mousetrap.unbind('ctrl+s');
  }
}
</script>

<template>
  <div>
    使用 Mousetrap 处理多个快捷键组合
  </div>
</template>

<script>
import Mousetrap from 'mousetrap';

export default {
  mounted() {
    // 绑定多个快捷键组合
    Mousetrap.bind('ctrl+s', this.saveData);
    Mousetrap.bind('ctrl+o', this.openData);
    Mousetrap.bind('ctrl+shift+a', this.selectAll);
  },
  methods: {
    saveData() {
      console.log('数据已保存！');
      // 这里可以加入实际的保存逻辑，例如调用 API
    },
    openData() {
      console.log('打开数据！');
      // 这里可以加入实际的打开逻辑，例如调用 API
    },
    selectAll() {
      console.log('选择所有数据！');
      // 这里可以加入实际的选择逻辑，例如调用 API
    }
  },
  beforeDestroy() {
    // 解绑快捷键
    Mousetrap.unbind('ctrl+s');
    Mousetrap.unbind('ctrl+o');
    Mousetrap.unbind('ctrl+shift+a');
  }
}
</script>

<template>
  <div>
    处理全局快捷键
  </div>
</template>

<script>
import { onMounted, onBeforeUnmount } from 'vue';
import Mousetrap from 'mousetrap';

export default {
  setup() {
    const handleKeyDown = (event) => {
      if (event.ctrlKey && event.key === 's') {
        event.preventDefault();
        console.log('全局数据已保存！');
        // 这里可以加入实际的保存逻辑，例如调用 API
      }
    };

    onMounted(() => {
      document.addEventListener('keydown', handleKeyDown);
    });

    onBeforeUnmount(() => {
      document.removeEventListener('keydown', handleKeyDown);
    });
  },
};
</script>