Vue2 implementa la función Ctrl + F del navegador

Vue2 implementa la función Ctrl + F del navegador

Dirección de github del complemento

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

Si es necesario, puede bifurcarlo y cambiar el código del complemento usted mismo. El principio del código es atravesar los nodos dom y luego modificar el texto en el nodo (rodear el texto seleccionado con una nueva etiqueta span).

La mayoría de los navegadores vienen con la función Ctrl + F. Cuando escribí este código por primera vez, era principalmente para la función de búsqueda de aplicaciones de escritorio en la PC (aplicaciones electrónicas).

Instalar complemento

Utilice un complemento de Vue2 search-bar-vue2

npm install search-bar-vue2

Registro global

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

registro parcial

<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>

anexo