Ctrl K勾起全局搜索,Vuejs官方网站、Tailwin

又是一个有意义的作用——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 vueuse.org/core/useMag…

使用方法一看就会，引进以后，界定键盘快捷键组成，然后用watch监视就可以。

import { useMagicKeys } from '@vueuse/core'

const keys = useMagicKeys()
const CtrlK = keys['Ctrl K']
const CommandK = keys['Cmd K']

watch(CtrlK, (v) => {
  visible.value = true
})

watch(CommandK, (v) => {
  visible.value = true
})

自动聚焦 focus Input

开启提示框后，自然就是希望能够聚焦点立即落到input文本框上，立即逐渐键入检索。 需要用到el-dialog的open事情，提示框打开，在nextTick中，focus the input element。

  <el-dialog
    v-model="visible"
    append-to-body
    :show-close="false"
    @open="onOpen"
    @close="onClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <el-input
        placeholder="检索整站"
        v-model="keyword"
        @input="search"
        ref="inputRef"
      />
    </template>

...
function onOpen() {
  nextTick(() => {
    inputRef.value.focus()
  })
}
...

输入关键词，表明相匹配百度搜索

这儿只搜索结果页路由器，搜索的结果集是来自于工程中全部路由器。

应用router.options.routes可以获得每一个路由器，它是一个树状结构的信息，你能赋值那棵树点击搜索。但我比较喜欢将它扁平化设计之后再去实际操作。

在提示框打开后，把路由器数扁平化设计，以便检索时进行。

这儿留意把详细途径拼起来存储在偏平后二维数组中，大家就能直接在突出的百度搜索页面上页面跳转到相匹配路由器了。

function flatJson(jsonData: RouteRecordRaw[], fp?: '') {
  return jsonData.reduce((pre, cur) => {
    const { children = [], ...item } = cur
    let fullPath = fp ? fp   '/'   cur.path : cur.path
    fullPath = fullPath.replace(/\/ /g, '/')

    return pre.concat([{ ...item, fullPath }], flatJson(children, fullPath))
  }, [] as RouteRecordRaw[])
}

检索分辨路由器的name和title，模糊匹配关键词。

function search() {
  list.value = flatRouteList.filter(
    (val: RouteRecordRaw) =>
      val?.name?.toLowerCase().indexOf(keyword.value.toLowerCase()) > -1 ||
      val?.meta?.title?.toLowerCase().indexOf(keyword.value.toLowerCase()) > -1
  )
}

跳转页面

百度搜索信息中包括了详细路由器数据信息，因此只需router.push(xxx)，自动跳转的时候注意要启用关掉提示框的办法，否则跳至新路由，提示框仍在页面中