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

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

プラグインの github アドレス

https://github.com/WenyaoL/search-bar-vue2

必要に応じて、フォークしてプラグイン コードを自分で変更できます。コードの原理は、dom ノードを走査し、ノード内のテキストを変更することです (選択したテキストを新しい span タグで囲みます)。

ほとんどのブラウザにはctrl+f機能が付いていますが、私が最初にこのコードを書いたときは主にPC側のデスクトップアプリケーション（電子アプリ）の検索機能を目的としていました。

プラグインのインストール

Vue2 プラグインを使用する search-bar-vue2

npm install search-bar-vue2

グローバル登録

//全局注册
import SearchBar from 'search-bar-vue2'
Vue.use(SearchBar)

部分登録

<template>
  <div>
    <search-bar :root="'#app'" 
                :highlightClass="'myHighLight'" 
                :selectedClass="'selected-highlight'" 
                :hiden.sync="showSearchBar"/>
    <button @click="searchClick()">搜索按钮</button>
    <div id="app">
        <!--文档-->
      <document/>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Document from './components/Document.vue';
import {
      
      searchBar} from 'search-bar-vue2'
export default Vue.extend({
      
      
  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>

展示する