vue3 实现浏览器ctrl+f功能

vue3 实现浏览器ctrl+f功能

安装

npm install search-bar-vue3 --save

插件GitHub地址

WenyaoL/search-bar-vue3: Recurrence of browser ctrl+F function (github.com)

Use

全局注册

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>

属性配置

prop	description	type	default
root	Selector for element(will be put into docment.querySelector(root))	string	Must provide
hidden	A bidirectional binding attribute to control the display and disappearance of the search bar（Please use v-model:hidden in Vue3 version）	boolean	true
highlightClass	The className assigned by the highlighted block	string	“__highLight”
selectedClass	The className assigned by the selected block	string	“selected-highlight”

插件search-bar-vue2（vue2版本）

Vue2 version：WenyaoL/search-bar-vue2: Recurrence of browser ctrl+F function (github.com)