Artikel ini membawakan anda pengetahuan yang berkaitan tentang Vue3 terutamanya cara Vue3 melaksanakan kotak carian global. Mari kita lihat bersama-sama.

Cara melaksanakan kotak carian global dalam Vue3

Prakata: Sejak mempelajari vue, saya telah memikirkan tentang fungsi arahan + K global tapak web rasmi vue untuk memaparkan fungsi carian kata kunci global. Kebetulan projek baru-baru ini juga perlu melaksanakan fungsi carian global, dan kebetulan saya boleh mempelajari idea fungsi ini dengan bayaran. Tahap tutorial di Internet adalah tidak sekata, dan saya kebetulan telah melakukan fungsi yang serupa dengan serbuk roti pop timbul global dalam projek sebelumnya, jadi saya membuat inferens dan menulis kotak carian global yang diperlukan oleh projek kami, dan saya ingin berkongsi idea saya.

Penjelasan grafik terperinci tentang langkah-langkah untuk melaksanakan kotak carian global dalam Vue3 (dengan kod)

Nota: Artikel ini tidak akan mengajar anda cara menulis kod dengan segera, tetapi akan menjadi panduan untuk membimbing anda langkah demi langkah untuk memahami reka bentuk komponen ini. Ia akan dijelaskan dari perspektif "Jika saya seorang pemula, jika seseorang boleh memberitahu saya perkara ini semasa saya mempelajari ilmu ini, maka saya boleh memahaminya dengan cepat" , Profesor Adalah lebih baik untuk mengajar orang memancing daripada mengajar mereka cara memancing. Saya harap anda dapat mengembangkan pemikiran anda dan membuat kesimpulan apabila membaca artikel ini.

1. Penyediaan fail

Anda perlu menyediakan tiga fail pada peringkat awal untuk melengkapkan kotak carian global ini

SearchBar.ts Fail
SearchBar.vue Fail
useSearch.ts Fail

Penjelasan grafik terperinci tentang langkah-langkah untuk melaksanakan kotak carian global dalam Vue3 (dengan kod)

2 Gaya kotak carian

Isu gaya bukan fokus artikel ini 🎜>SearchBar.vue Lakarkan segi empat sama yang sangat mudah div dalam fail dan bungkusnya dengan teg input untuk mempelajari perkara berikut dengan cepat.

Tetapi pertama-tama kita perlu menjelaskan pemikiran kita Komponen ini akan muncul di bahagian atas halaman kita, jadi susun atur mutlak perlu digunakan di dalam komponen. Mari pergi ke

untuk menetapkan gaya untuk yang paling luar SearchBar.vue gaya lain di sini ditulis menggunakan div Rakan-rakan yang tidak pernah menggunakannya tidak perlu risau tengah artikel ini Kandungan tidak terlibat. (CSS ditulis sebagai sifat yang dikira tidak mempunyai makna istimewa dalam senario ini, ia hanya lebih dipertimbangkan semasa reka bentuk) Uno CSS Penjelasan grafik terperinci tentang langkah-langkah untuk melaksanakan kotak carian global dalam Vue3 (dengan kod)

3 Fungsi pemaparan

h dan fungsi render (titik kunci)

Buka fail
SearchBar.ts yang telah disediakan sebelum ini dan import kedua-dua ini daripada fungsi vue , dan memperkenalkan versi ringkas kotak carian (SearchBar.vue) yang ditulis dalam langkah sebelumnya ke dalam fail ini.
Pembaca yang telah membaca artikel saya sebelum ini
Melaksanakan Roti Bakar dalam Vue3 mungkin sedikit lebih biasa, tetapi dalam artikel itu, ia juga merupakan yang pertama saya masa saya bersentuhan dengan dua fungsi ini, jadi ringkasan pada masa itu tidak begitu tepat, jadi saya menyusun semula pemikiran saya dan menerangkannya di sini.
Pertama sekali, mari kita lihat definisi fungsi ini dari pengenalan di laman web rasmi.
Dapat dilihat bahawa parameter pertama fungsi ini diperlukan dan boleh menjadi
atau string Artikel ini memfokuskan pada kes di mana parameternya ialah Component. Maksudnya ialah nilai pulangan bagi fungsi ini ialah Component, yang anda mesti biasa dengannya, VNodeNod Maya Pembaca artikel ini mungkin tidak biasa dengan prinsip dom Jelas, tetapi saya percaya anda mesti tahu mekanisme asasnya. Vue sebenarnya memaparkan dom maya --> dan kemudian menukarnya menjadi dom sebenar.
Jangan tergesa-gesa untuk menulis kod saya rasa anda mungkin tahu cara penulisan ini dengan lebih baik, seperti kotak pop timbul mudah yang kami tulis sebelum ini dalam SearchBar.vue fail. Seluruh gaya komponen ditulis dalam komponen
Kemudian kita boleh mengikut pengenalan fungsi
h() di atas, parameter pertama yang diterima boleh , Jadi bukankah Component kita adalah komponen? Jadi jika saya tidak mahu menggunakan SearchBar.vue

3 Tulis

SearchBarMaker pembina dan kinikan kaedah

Mari Kami Kembali ke fail
. SearchBar.ts
Fikirkan dahulu, kotak carian ini mesti ada fungsi yang muncul dan fungsi yang hilang?, ok, beri nama, satu
hadir , satu tolak .
Seterusnya saya perlu mencipta
VNode dan kemudian mencari cara untuk memprosesnya menjadi dom sebenar. Selepas kajian di atas, anda boleh segera memikirkan kaedah penulisan berikut dalam langkah pertama.
Yang berikut adalah lebih berat, fungsi
. Kini setelah kita mempunyai render()dom maya, bagaimanakah kita boleh mendapatkan dom sebenar? Vue memberikan kita fungsi sedemikian Di sini kita perlu memberi tumpuan untuk melihat bahawa jenis fungsi ini ialah nilai, iaitu jenis . RootRenderFunction
Di sini kita menukar pemikiran kita dan melihat parameter kedua fungsi
render ialah bekas:HostElement, dan kemudian Mari buka fail main.ts kami dan masuk ke bahagian definisi Adakah mount menemui keajaibannya Walaupun kami tidak tahu HostElement Apa adalah jenisnya, tetapi adakah anda tahu apakah parameter yang diisi dalam fungsi anda? (Jika anda terlupa, putar balik dan semak laman web rasmi secara sedar.) mountYa, ia adalah satu-satunya
dom sebenar di dunia, elemen divapp ringkas dengan id dipanggil . Disebabkan oleh keterbatasan ruang, anda boleh memahami secara ringkas di sini dahulu Fungsi render akan membungkus dom maya anda menjadi elemen dom yang sebenar untuk memberikannya shell dom yang sebenar untuk memberitahunya tempat untuk memaparkan dom maya.
ok, selepas mendapat dom maya yang dibungkus, langkah seterusnya ialah memberitahu penyemak imbas tempat untuk memaparkan elemen ini. Apa yang perlu kita fikirkan di sini ialah kerana ia boleh muncul secara global, ia perlu muncul pada semua komponen. Cara paling mudah adalah untuk menjadikannya muncul dalam elemen pertama body, kemudian ia akan berada pada tahap yang sama dengan semua komponen halaman web kami (petua: biasanya semua komponen halaman kami akan ditulis dalam A div dalam badan Apa? Anda bertanya kepada saya mengapa? digantung dalam elemen sebenar ini dengan aplikasi id)Malah, idea operasi kami adalah sangat mudah Apabila saya menekan butang carian global , maka anda hanya memasukkan komponen saya sebelum elemen . <div id="app"> <img src="https://img.php.cn/upload/article/000/000/020/659e9d144b30400682dc69d8bf2b853c-18.png" alt="Penjelasan grafik terperinci tentang langkah-langkah untuk melaksanakan kotak carian global dalam Vue3 (dengan kod)" loading="lazy">ok, sekarang kita boleh nampak kesan asasnya, jom test. Mari tulis butang di dalam komponen , kemudian panggil kaedah pada contoh <li>. (<p>maker<code>App.vue rasa tak masuk akal sangat. Kemudian kami tukar nama SearchBarCreator kepada present. Hanya nama sahaja yang berubah, dan logiknya tidak berubah langsung.?)The kesan adalah seperti berikut : SearchBarMakerSeachBarCreator
Di sini
searchBar
dom
ini pada masa yang sesuai. Di sini kita perlu tahu satu perkara, kita perlu mempromosikan ke skop global fail semasa, bukan hanya dalam . searchBarok, mari kita uji opennew

4. Optimumkan logik kod pembina SearchBarCreator

, berbilang kotak carian akan muncul, tetapi apa yang kami mahukan ialah hanya satu kotak carian akan muncul di seluruh dunia. Memikirkannya dari sudut lain, iaitu, pada masa yang sama, hanya satu contoh

kami keluar boleh muncul. Fikirkan? Saya menambah pembolehubah, Jika ia dipaparkan, maka apabila pengguna memanggil sekali lagi, saya akan memanggil kaedah new untuk menghilangkannya. SeachBarisShowing 是否正在被展示Uji: presentdismiss
OK, nampaknya masalah semasa telah diselesaikan dengan sempurna. Penjelasan grafik terperinci tentang langkah-langkah untuk melaksanakan kotak carian global dalam Vue3 (dengan kod)
5 Tulis contoh panggilan yang unik di peringkat global

Dalam kes di atas, kita sudah boleh mencipta contoh

? Adakah saya masih perlu memperkenalkannya semula dan kemudian-
? bukan, seorang bos besar berkata bahawa pengaturcara sangat malas dan tidak boleh menulis kod berulang peringkat rendah itu. Jadi bagaimana untuk mencapainyaApp.vue
Buka fail useSearch.ts yang kami sediakan sebelum ini dan kami menukar contoh SearchBar yang sebelum ini dijana secara global dalam App.vue untuk menjadikannya globalts Hasilkan satu dalam fail, dan kemudian masukkan beberapa kaedah contoh ini sendiri ke dalam fungsi dan dedahkannya ke luar. Kemudian saya boleh memanggil kedua-dua kaedah ini pada contoh ini di mana-mana sahaja di dunia.
Jom cuba di App.vue.
Ini ialah kaedah panggilan fail App.vue kami yang terdahulu. Mari kita mengubahnya. Mari uji fungsi sekali lagi untuk melihat sama ada terdapat sebarang masalah
Ini akan menjadi lebih mudah. 🎜>6. Tambahkan kekunci pintasan global
Command + K

Sebelum itu, kita perlu memahami sesuatu konsep, perhatikan fail

keseluruhan
? main.tsid='app'Ya, ia adalah komponen App.vue yang kami nyatakan sebelum ini.
Jadi, jika saya menambah acara papan kekunci pada objek
tetingkap
ini dipasang, bolehkah? Bagaimana untuk menambahnya? Sebenarnya, ia sangat, sangat mudah untuk menggunakan kombinasi kekunci, kita perlu menggunakan
"keydown"App.vue Secara khusus mengapa ia bukan "keypress" antara keduanya dengan sendirinya. Ia bukan kandungan utama artikel ini. Pada masa ini, mari klik
untuk melihat kandungan yang dicetak. Fokus di sini ialah atribut
Di sini kita juga boleh menyimpulkan bahawa acara menekan
"ctrl"command ialah metaKey
keydown
Tetapi kami mendapati bahawa nampaknya tidak ada atribut
, jadi bagaimana kita boleh menilai? Jangan risau dan teruskan melihat ke bawah. K:trueKita dapat melihat bahawa acara papan kekunci
acara
kunci
dan nilainya kebetulan daripada jenis rentetan " k",
Di sini saya akan mengumumkan secara langsung kaedah penulisan. js membolehkan kita menilai sama ada dua butang ditekan pada masa yang sama.

Penjelasan grafik terperinci tentang langkah-langkah untuk melaksanakan kotak carian global dalam Vue3 (dengan kod) Mari uji, mari pergi

Kemudian cetak sekali lagi dan tekan
dan . Ujinya: commandk 7. Tambahkan animasi yang muncul

Seperti yang dapat kita lihat di atas, penampilan tiba-tiba ini Di sana nampaknya agak mendadak. Saya berharap bahawa kotak carian ini boleh mempunyai sedikit kesan menyorot apabila ia muncul (Serupa dengan kesan di bawah) Bagaimanakah saya boleh melakukan ini? ?

Saya akan memperkenalkan idea yang lebih mudah di sini Kami pratetapkan animasi App.vueCss dalam gaya fail dan memberikannya nama yang baik. . Panggilnya "searchInput"
Kemudian kembali ke komponen searBar.vue kami dan berikan nama yang bagus kepada komponen paling luar komponen kami searchBarWrapper di sini.
Kemudian kembali ke fail SearchBar.ts kami, iaitu fail tempat kami meletakkan pembina SeachBarCreator kami. (petua: Tidak useSearch.ts) Izinkan saya menerangkan idea di sini. Selepas memanggil fungsi render, komponen ini sebenarnya telah dijadikan elemen dom sebenar, tetapi kami belum menentukan kedudukan pemaparan untuknya lagi. Memandangkan ia adalah dom sebenar, maka kita boleh mendapatkan ini document.getElementById这个方法（querySelector同理，一个意思） melalui SearchBar.vue组件 Seterusnya, saya hanya perlu menambah padanya nilai yang baru kita tambahkan dalam document.body.insertBefore sebelum memanggil App.vue. kaedah. Nama kelas pratetap, searchInput, akan mencapai kesan yang kita inginkan dengan sempurna.
Nota: gaya, perkara ini hanyalah pemilih nama kelas, jangan lupa perkara asas.
Uji kesan:

8 Autofokus

dalam kotak pop timbul input sangat mudah berbanding dengan apa yang telah saya lalui di sini. Cuma panggil kaedah fokus input itu sendiri dalam nextTick.
Penjelasan grafik terperinci tentang langkah-langkah untuk melaksanakan kotak carian global dalam Vue3 (dengan kod)

dialog, modal kotak dll. Kita perlu memahami idea pelaksanaan komponen perpustakaan komponen, bukannya hanya menyalin dan menampal.

1. Bagaimana hendak menyimpan sejarah carian?
2. Bagaimana untuk mencapai persatuan carian masa nyata

fail disiarkan di sini Saya harap pembaca boleh menggunakannya sebagai rujukan sahaja dan berharap tidak menyalin dan menampalnya secara langsung. SearchBar.ts

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("不需要关闭")
    }
  }
}

tutorial video vue.js"

Penjelasan grafik terperinci tentang langkah-langkah untuk melaksanakan kotak carian global dalam Vue3 (dengan kod)

Cara melaksanakan kotak carian global dalam Vue3

1. Penyediaan fail

2 Gaya kotak carian

h dan fungsi render (titik kunci)

SearchBarMaker pembina dan kinikan kaedah

, berbilang kotak carian akan muncul, tetapi apa yang kami mahukan ialah hanya satu kotak carian akan muncul di seluruh dunia. Memikirkannya dari sudut lain, iaitu, pada masa yang sama, hanya satu contoh

Dalam kes di atas, kita sudah boleh mencipta contoh

Sebelum itu, kita perlu memahami sesuatu konsep, perhatikan fail

Seperti yang dapat kita lihat di atas, penampilan tiba-tiba ini Di sana nampaknya agak mendadak. Saya berharap bahawa kotak carian ini boleh mempunyai sedikit kesan menyorot apabila ia muncul (Serupa dengan kesan di bawah) Bagaimanakah saya boleh melakukan ini? ?

8 Autofokus

Artikel berkaitan