又是一个有意思的功能——Ctrl+K唤起全局搜索，Vuejs官网、Tailwind CSS官网… 都用上了。

全局搜索功能可以帮助用户快速获取信息定位，对于改进用户体验感还是很有意义的。当然本项目做的是一个低配版，只对路由进行全局搜索，毕竟更多数据内容的搜索还得依靠后端返回，但是前端实现的思路是一致的。

1. 唤起搜索对话框，通过点击顶部搜索按钮，或者使用快捷键Ctrl+K/Command+K
2. 搜索框打开时，Input输入框自动focus
3. 输入关键字，显示对应搜索结果
4. 点击结果，跳转到对应页面

唤起搜索对话框

点击搜索图标这个太简单了，就不用写了

那么如何使用快捷键Ctrl+K/Command+K呢？可以自己写一个方法来监听按键，但是遇到按键组合的时候就变得复杂起来，所以这里我偷懒了，搬出强大后援vueuse

vueuse #usemagickeys

vueuse有好几个监听按键输入的事件，其中usemagickeys是可以用于按键组合的。

#usemagickeys https://vueuse.org/core/useMagicKeys/#usemagickeys

用法一看就会，引入之后，定义快捷键组合，然后使用watch监听即可。

自动聚焦 focus Input

打开对话框后，当然是希望可以焦点直接落在input输入框上，直接开始输入搜索。
需要使用el-dialog的open事件，对话框打开后，在nextTick中，focus the input element。

输入关键字，显示对应搜索结果

这里只搜索页面路由，搜索的结果集来自于项目中所有路由。

使用可以得到所有的路由，它是一个树状结构的数据，你可以遍历这棵树进行搜索。但我更喜欢把它扁平化之后再操作。

在对话框打开时，把路由数扁平化，以供搜索时使用。

这里注意把完整路径拼起来保存到扁平后的数组中，我们就可以直接在渲染的搜索结果列表中点击跳转到对应路由了。

搜索判断路由的name和title，模糊匹配关键字。

跳转页面

搜索结果数据中包含了完整路由数据，所以只需要，跳转的时候记得要调用关闭对话框的方法，要不然跳到新路由，对话框还在页面上😄

其实这个功能最麻烦的地方就是使用快捷键组合，vueuse完美解决了最棘手的部分，剩下的步骤基本都是基础操作，按步骤完成即可。

因为ts不熟练，所以代码有不少爆红的地方，还是要专门找一天好好学习ts才行啊，项目中红色波浪线〰️越来越多了。

本项目GIT地址：github.com/lucidity99/…