vue3 ts 检测键盘大小写是否开启

在Vue 3中，你可以使用`window`对象的`KeyboardEvent`事件来检测键盘的大小写状态。以下是一个示例代码：

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const handleKeyPress = (event: KeyboardEvent) => {
      if (event.getModifierState('CapsLock')) {
        console.log('Caps Lock is enabled');
      } else {
        console.log('Caps Lock is disabled');
      }
    };

    onMounted(() => {
      window.addEventListener('keydown', handleKeyPress);
    });

    onUnmounted(() => {
      window.removeEventListener('keydown', handleKeyPress);
    });
  },
};

在上面的代码中，我们使用了Vue 3的`onMounted`和`onUnmounted`钩子函数来添加和移除事件监听器。当用户按下键盘时，会触发`keydown`事件，并调用`handleKeyPress`函数来检测Caps Lock键的状态。如果Caps Lock键被按下并且处于启用状态，将会在控制台输出"Caps Lock is enabled"；否则，将会输出"Caps Lock is disabled"。

请注意，为了能够在Vue组件中使用TypeScript类型检查，我们需要对`event`参数进行类型注解，以确保代码的正确性。