Vue3如何實現(xiàn)全局搜索框

這篇文章主要介紹“Vue3如何實現(xiàn)全局搜索框”，在日常操作中，相信很多人在Vue3如何實現(xiàn)全局搜索框問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue3如何實現(xiàn)全局搜索框”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一. 文件準備

前期你需要準備三個文件，來完成這個全局搜索框

• SearchBar.ts 文件

• SearchBar.vue 文件

• useSearch.ts 文件

二. 搜索框的樣式

樣式問題不是本文的重點，你可以花費五分鐘在 SearchBar.vue 文件內(nèi)速寫一個非常簡易的正方形 div 包裹著一個 input 標簽即可快速進行下面的學習。

但是首先我們需要理清思路，這個組件是會出現(xiàn)在我們頁面的最頂部的，所以它組件內(nèi)部需要用到絕對布局。我們?nèi)?SearchBar.vue 去設(shè)置一個樣式給最外層的 div，這里其它樣式的寫法使用的是 Uno CSS，沒用過的小伙伴也不需要擔心，它只是單純的樣式，和本文中心內(nèi)容不牽扯。（CSS寫成計算屬性在這個場景也毫無特殊意義，只是單純設(shè)計時考慮多了）

三. 渲染函數(shù) h 和 render 函數(shù)(重點)

• 打開之前準備的 SearchBar.ts 文件，從 vue 里引入這兩個函數(shù)，并且把在上一步寫好的簡陋版搜索框（SearchBar.vue）引入到這個文件內(nèi)。

  

• 首先我們從官網(wǎng)的介紹，先看一下這個函數(shù)的定義。
  可以看出，這個函數(shù)第一個參數(shù)是必填的，可以是一個 string 和 Component，這篇文章重點討論參數(shù)為 Component 的情況。重點是這個函數(shù)的返回值，是一個 VNode，這個你一定不陌生，Virtual Node ，看本篇文章的讀者可能對虛擬 dom 的原理可能不是那么清楚，但是我相信你們一定知道它的基本機制。Vue 其實是先渲染 虛擬 dom -->然后 轉(zhuǎn)換成真實 dom。

• 先別急著寫代碼，我想你可能更清楚這樣的寫法，比如我們前面在 SearchBar.vue 文件內(nèi)寫的簡單的彈出框。

• 整個組件的樣式都是在 Vue 提供的 <template> 組件內(nèi)寫的，但是你要知道，Vue 在底層還是通過調(diào)用 h() 來完成虛擬 dom 的構(gòu)建。而 <template> 僅僅只是 Vue 為了讓你用熟悉的原生 html 開發(fā)而為你提供的語法糖?而已。（嗯，你可以這樣理解）

• 那么我們可以根據(jù)上面 h() 函數(shù)的介紹，它接收的第一參數(shù)可以是 Component ，那我們這個 SearchBar.vue 不就是組件嗎？那如果我不想使用 <template> 去展示這個組件的話，我是否可以這樣寫呢？h(SearchBar.vue)。沒錯，是的，你就是可以這樣寫。別忘了 h 的返回值就是我們想拿到的 Vnode ，所以按照正確的寫法是這樣的。

三. 編寫 SearchBarMaker 構(gòu)造函數(shù)和 present 方法

• 讓我們回到 SearchBar.ts 文件。

  

• 首先思考，這個搜索框一定有一個出現(xiàn)的函數(shù)，和一個消失的函數(shù)?，ok，起名字，一個 present，一個 dismiss 。
  

• 接下來我需要創(chuàng)建出一個 VNode ，然后想辦法處理成真實 dom。經(jīng)過上面的學習，第一步馬上就可以想到下面的寫法。
  

• 下面這位更是重量級，render() 函數(shù)。虛擬 dom 有了，真實dom 該如何拿到呢？ Vue 為我們提供了這樣一個函數(shù)，這里我們需要重點去看這個函數(shù)的類型是值，是一個 RootRenderFunction 類型的。

• 這里我們轉(zhuǎn)變一下思路，我們看一下 render 函數(shù)的第二個參數(shù)是 一個 container:HostElement ，然后讓我們打開我們 main.ts 文件，我們跳進 mount的定義部分，發(fā)現(xiàn)神奇的地方了嗎，我們雖然不知道 HostElement 的類型是什么，但是你知道你 mount 函數(shù)內(nèi)填的參數(shù)是什么了嗎？（忘掉的轉(zhuǎn)頭自覺復習官網(wǎng)哈。）
  沒錯，就是全局唯一的一個真實 dom，一個樸實無華的id叫 app 的 div 元素。

• 由于篇幅限制，在這里你可以先暫時簡單的理解，render 函數(shù)會將你的虛擬 dom 包裝成一個真實 dom 元素，但是你需要給它一個真實的 外殼dom 來告訴它將虛擬 dom 渲染到哪個位置。

• ok，拿到一個包裝后的虛擬 dom ，接下來就是告訴瀏覽器在哪里渲染這個元素。這里我們需要思考?，既然是全局都可以彈出的，并且需要在所有組件之上彈出。那么最簡單的方法就是讓它出現(xiàn)在 body的第一個元素，那么它一定會和我們網(wǎng)頁所有的組件同級別（tips：通常我們所有的頁面構(gòu)成都會寫在 body內(nèi) 的一個 div 內(nèi)。什么？你問我為什么？請打開你的 index.html 看一下，你是否忘記了我們的 App.vue 是掛在這個真實的，id為 app 的元素內(nèi)的）

• 那其實我們的操作的思路就是非常簡單的，當我按下全局搜索按鈕，那么你就在 <div id="app"> 的元素之前插入我的組件即可。

  

• ok，到這里我們已經(jīng)可以看到基本效果了，我們來測試一下。讓我們在 App.vue 組件內(nèi)隨便寫一個按鈕，然后調(diào)用 SearchBarCreator 實例身上的 present 方法。(maker 感覺不是那么合理，之后我們將 SearchBarMaker 變更為 SeachBarCreator 的叫法，僅僅是名字變了而已，邏輯什么的根本沒變哦。?)

  效果如下：
  

• 到這里 searchBar 已經(jīng)可以呈現(xiàn)在頁面上了，但是我們還不知道怎樣讓它消失，其實也非常簡單，我們只需要在合適的時機移除這個 dom 元素即可。在這里我們需要知道一點，我們需要將 searchBar 提升到當前文件的全局，不能僅只在 open中去 new 了。
  

  ok，我們測試一下
  

四. 優(yōu)化 SearchBarCreator 構(gòu)造函數(shù)的代碼邏輯

寫到這里的時候，你可能發(fā)現(xiàn)了一個小問題，當我一直去按搜索按鈕的時候，它會出現(xiàn)多個搜索框，但是我們希望的是它在全局只能出現(xiàn)一個搜索框。換個角度思考，也就是同一時間，這個被我們 new 出來的 SeachBar 實例只能出現(xiàn)一個。思考一下?，我加一個變量，isShowing 是否正在被展示 ，如果正在被展示的話，那么用戶再次調(diào)用 present 的時候，我就去調(diào)用實例自身的 dismiss 方法讓它消失，是否可行呢？

測試一下：

OK，看來完美解決當前的問題了。

五. 編寫全局唯一的調(diào)用實例

• 在上面的這種情況下，我們已經(jīng)可以在 App.vue 文件內(nèi)去 new 一個實例來調(diào)用這個搜索框了。但是我們加入現(xiàn)在需要在 XXX.vue 文件內(nèi)調(diào)用這個搜索框呢？我難道還需要重新去引入，然后重新 new 嗎？nonono，某位大佬說過，程序員都是很懶的，不可能寫這種低級的重復代碼的。那么該如何實現(xiàn)呢

• 打開我們之前準備的 useSearch.ts 文件，我們把之前在 App.vue 的全局生成的這個 SearchBar 實例轉(zhuǎn)換思路，使它在全局的一個 ts 文件內(nèi)生成一個，然后把這個實例自身的一些方法封裝成函數(shù)，暴露給外部。那么我就可以在全局任意一個地方去調(diào)用這個實例身上的這兩個方法。

• 讓我們在 App.vue 去試一下。
  這是我們之前的 App.vue 文件的調(diào)用方法。我們改造一下它。我們再次測試一下功能有沒有什么問題

  
  如此一來就方便很多了，我們可以在任意位置去調(diào)用這個“唯一的搜索框”

六. 添加全局的快捷鍵 Command + K

• 再此之前，我們需要理解一個概念，注意我們的 main.ts 文件，我們是把誰掛在了全局的那一個 id='app' 的真實 dom 下的？

  
  沒錯，就是前面我們提到的 App.vue 組件。

• 那么假如我在這個 App.vue 組件掛載的時候，給全局 window 對象身上添加一個鍵盤事件，是不是就可以了呢？怎么添加呢？其實非常非常簡單，要用到見組合按鍵，我們就需要使用到 “keydown”，具體為什么不是 “keypress” ，讀者可以自行查閱這兩者的區(qū)別，不屬于本文的主要探討內(nèi)容。

• 這時候，我們先來按一下 command 看看打印的內(nèi)容是什么。這里重點的內(nèi)容是該鍵盤事件身上的metaKey 屬性。在這里我們還可以推算出按下 “ctrl” 的事件為

  

• keydown 事件支持多個按鍵同時按下。當我們同時按下 “command” 和 “K” 鍵，會發(fā)生什么呢？但是我們發(fā)現(xiàn)好像并沒有 K:true 這個屬性呀，那我們怎么去判斷呢？別著急接著往下看。

• 我們可以看到鍵盤事件 event 身上有個 key 屬性，它的值恰好是字符串類型的 “k”

  

  
  

這里我直接公布寫法，js 允許我們這樣判斷是否同時按下兩個按鍵。

• 我們測試一下，我們?nèi)グ?App.vue 文件內(nèi)的這兩個按鈕給去掉然后再打印一下我們按下 command 和 k 的時候。測試一下：

  

七. 添加出現(xiàn)的動畫

• 在上面我們可以看到，這樣突然的出現(xiàn)好像有一絲絲的突兀。我希望這個搜索框在出現(xiàn)的時候，可以有那么一絲絲的平移效果，（類似于下面的效果）該如何做呢？?

• 我這里介紹一種較為簡單的思路，我們在 App.vue 文件的 style 內(nèi)預設(shè)一個 Css 動畫，并起好名字。叫做 "searchInput"

• 然后回到我們 searBar.vue 的組件去，給我們這個組件最外層的起一個好聽的名字，我這里就叫做 searchBarWrapper。

• 然后回到我們的 SearchBar.ts 文件內(nèi)，也就是放我們 SeachBarCreator 構(gòu)造函數(shù)的那個文件內(nèi)。（tips：不是 useSearch.ts 哦） 我這里解釋一下思路，在調(diào)用 render 函數(shù)后，這個組件其實已經(jīng)渲染成為一個真實的 dom 元素，只不過我們還沒給它指定渲染的位置。既然是真實的 dom ，那么我們就可以通過 document.getElementById這個方法（querySelector同理，一個意思）拿到這個SearchBar.vue組件 ，接下來我只需要在調(diào)用 document.body.insertBefore 方法前，給它添加上剛剛我們在 App.vue 里預設(shè)好的類名，searchInput ，就完美達成我們想要的效果了。

• 注意：style ，這個點僅僅是類名選擇器，不要忘記了基礎(chǔ)知識。

• 測試一下效果：

  

八. 自動聚焦

在彈出框的 input 框?qū)崿F(xiàn)自動聚焦相比于之前講的就非常簡單了，我在這里一筆帶過了。只需要在 nextTick 中調(diào)用 input 本身的 focus 方法即可。

源碼

import { h, render } from "vue"

import SearchBar from "./SearchBar.vue"
class SearchBarCreator {
  container: HTMLElement
  appElement: HTMLElement | null
  showing: boolean
  _dismiss: () => void
  constructor() {
    this.container = document.createElement("div")
    this.showing = false
    this.appElement = document.body.querySelector("#app")
    this.present.bind(this)
    this.dismiss.bind(this)
    this._dismiss = this.dismiss.bind(this)
  }

  present() {
    if (this.showing) {
      this.dismiss()
    } else {
      const SearchBar = h(h(SearchBar))
      render(SearchBar, this.container)
      const searchBarWrapperDOM =
        this.container.querySelector("#searchBarWrapper")
      searchBarWrapperDOM?.classList.add("animate-searchInputAnimation")
      document.body.insertBefore(this.container, document.body.firstChild)
      this.showing = true
      this.appElement?.addEventListener("click", this._dismiss)
    }
  }

  dismiss() {
    if (this.showing && this.container) {
      render(null, this.container)
      document.body.removeChild(this.container)
      this.showing = false
      this.appElement?.removeEventListener("click", this._dismiss)
    } else {
      console.log("不需要關(guān)閉")
    }
  }
}

到此，關(guān)于“Vue3如何實現(xiàn)全局搜索框”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>