Vue2 implements browser ctrl+f function
Plug-in github address
https://github.com/WenyaoL/search-bar-vue2
If necessary, you can fork it and change the plug-in code yourself. The principle of the code is to traverse the dom nodes and then modify the text in the node (surround the selected text with a new span tag).
Most browsers come with the ctrl+f function. When I first wrote this code, it was mainly for the search function of desktop applications on the PC side (electron applications).
Install plugin
Use a Vue2 plug-in search-bar-vue2
npm install search-bar-vue2
Global registration
//全局注册
import SearchBar from 'search-bar-vue2'
Vue.use(SearchBar)
partial registration
<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>
exhibit
