vue怎么实现键盘搜索

监听键盘事件

在Vue中可以通过v-on或@指令监听键盘事件。例如监听回车键触发搜索：

<input @keyup.enter="handleSearch" />

封装搜索方法

在methods中定义搜索逻辑处理方法：

methods: {
  handleSearch() {
    // 执行搜索逻辑
    console.log('触发搜索', this.searchText)
  }
}

防抖处理

为避免频繁触发搜索，建议使用lodash的debounce进行防抖：

import { debounce } from 'lodash'

methods: {
  handleSearch: debounce(function() {
    // 实际搜索逻辑
  }, 500)
}

全局键盘监听

如需监听全局键盘事件，可在mounted生命周期挂载监听：

mounted() {
  window.addEventListener('keyup', this.handleGlobalKey)
},
beforeDestroy() {
  window.removeEventListener('keyup', this.handleGlobalKey)
}

移动端兼容

对于移动设备，可同时监听虚拟键盘的搜索按钮：

<input 
  @keyup.enter="handleSearch"
  @search="handleSearch"
/>

自定义指令

对于复用场景，可封装为自定义指令：

Vue.directive('enter-search', {
  bind(el, binding) {
    el.addEventListener('keyup', (e) => {
      if(e.key === 'Enter') binding.value()
    })
  }
})

使用方式：

<input v-enter-search="handleSearch" />