vue实现键盘

Vue 实现键盘输入功能

在 Vue 中实现键盘输入功能通常涉及监听键盘事件、处理用户输入以及更新数据。以下是几种常见的方法：

监听键盘事件

使用 v-on 指令或 @ 简写监听键盘事件。例如监听回车键：

<template>
  <input @keyup.enter="handleEnter" />
</template>

<script>
export default {
  methods: {
    handleEnter() {
      console.log('Enter key pressed');
    }
  }
}
</script>

动态绑定键盘事件

通过动态绑定键盘事件实现更灵活的输入处理：

<template>
  <input @keyup="handleKeyUp" />
</template>

<script>
export default {
  methods: {
    handleKeyUp(event) {
      if (event.key === 'Enter') {
        console.log('Enter key pressed');
      }
    }
  }
}
</script>

使用修饰符

Vue 提供了一些键盘事件修饰符，如 .enter、.tab、.esc 等：

<template>
  <input @keyup.esc="handleEscape" />
</template>

<script>
export default {
  methods: {
    handleEscape() {
      console.log('Escape key pressed');
    }
  }
}
</script>

自定义键盘指令

通过自定义指令实现全局键盘监听：

<template>
  <input v-keyboard.enter="handleEnter" />
</template>

<script>
export default {
  directives: {
    keyboard: {
      bind(el, binding) {
        el.addEventListener('keyup', (event) => {
          if (event.key === binding.arg) {
            binding.value();
          }
        });
      }
    }
  },
  methods: {
    handleEnter() {
      console.log('Enter key pressed');
    }
  }
}
</script>

第三方库

使用第三方库如 vue-shortkey 实现更复杂的键盘快捷键功能：

<template>
  <button v-shortkey="['enter']" @shortkey="handleEnter">Submit</button>
</template>

<script>
import VueShortkey from 'vue-shortkey';
export default {
  directives: {
    shortkey: VueShortkey
  },
  methods: {
    handleEnter() {
      console.log('Enter key pressed');
    }
  }
}
</script>

键盘输入与数据绑定

结合 v-model 实现双向数据绑定：

<template>
  <input v-model="inputText" @keyup.enter="submit" />
</template>

<script>
export default {
  data() {
    return {
      inputText: ''
    }
  },
  methods: {
    submit() {
      console.log('Submitted:', this.inputText);
    }
  }
}
</script>

键盘导航

实现键盘导航功能，如上下箭头选择列表项：

<template>
  <ul>
    <li 
      v-for="(item, index) in items" 
      :key="index" 
      :class="{ active: index === activeIndex }"
      @click="selectItem(index)"
    >
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      activeIndex: 0
    }
  },
  mounted() {
    window.addEventListener('keydown', this.handleKeyDown);
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    handleKeyDown(event) {
      if (event.key === 'ArrowUp') {
        this.activeIndex = Math.max(0, this.activeIndex - 1);
      } else if (event.key === 'ArrowDown') {
        this.activeIndex = Math.min(this.items.length - 1, this.activeIndex + 1);
      } else if (event.key === 'Enter') {
        this.selectItem(this.activeIndex);
      }
    },
    selectItem(index) {
      console.log('Selected:', this.items[index]);
    }
  }
}
</script>

以上方法涵盖了 Vue 中实现键盘输入功能的主要场景，可根据具体需求选择合适的方式。