vue3はブラウザのctrl+f機能を実装します

vue3はブラウザのctrl+f機能を実装します

インストール

npm install search-bar-vue3 --save

プラグインの GitHub アドレス

WenyaoL/search-bar-vue3: ブラウザの Ctrl+F 機能の再発 (github.com)

使用

グローバル登録

import SearchBar from 'search-bar-vue3'
Vue.use(SearchBar)

部分登録

<template>
  <div>
    <search-bar 
    :root="'#document'" 
    :highlightClass="'myHighLight'" 
    :selectedClass="'selected-highlight'" 
    v-model:hidden="showSearchBar"/>
    <button @click="searchClick()">搜索按钮</button>
    <div id="document">
      <document/>
    </div>
  </div>
</template>

<script lang="ts">
import {
      
       defineComponent } from 'vue';
import Document from './Document.vue'
import {
      
      SearchBar} from 'search-bar-vue3'

export default defineComponent({
      
      
  name: 'App',
  components: {
      
      
    Document,
    SearchBar
  },
  data(){
      
      
    return{
      
      
      showSearchBar:false
    }
  },
  methods:{
      
      
    searchClick(){
      
      
      
      this.showSearchBar = !this.showSearchBar
      console.log("切换showSearchBar",this.showSearchBar);
    }
  }
});
</script>

<style>
.myHighLight{
      
      
  background-color: yellow;
}
.selected-highlight{
      
      
  background-color: yellowgreen;
}
</style>

プロパティの構成

小道具	説明	タイプ	デフォルト
根	要素のセレクター(docment.querySelector(root)に入れられます)	弦	提供する必要があります
隠れた	検索バーの表示・非表示を制御する双方向バインディング属性（Vue3版ではv-model:hiddenをご利用ください）	ブール値	真実
ハイライトクラス	強調表示されたブロックによって割り当てられた className	弦	「__ハイライト」
選択されたクラス	選択したブロックによって割り当てられた className	弦	「選択されたハイライト」

プラグイン search-bar-vue2 (vue2 バージョン)

Vue2 バージョン：WenyaoL/search-bar-vue2: ブラウザ Ctrl+F 機能の再発 (github.com)