Vue关键词搜索高亮
web前端开发
共 1296字,需浏览 3分钟
·
2020-11-25 02:52
![](https://filescdn.proginn.com/e704511603a5edb9f1330027517f9cc9/84f48479d71245a19ed7910340e2d8bc.webp)
一、实现原理
使用正则匹配出文本内容中的所有关键词,在关键词外包一层内联标签,比如span或者font,通过innerHtml渲染文本。使用CSS控制插入的内联元素样式,并且记录下当前搜索到的结果是第几个,使用不同的样式来展示。
江畔何人初见<font style="background: #ff9632">月font>?江<font style="background: #ffff00">月font>何年初照人?
接下来会介绍一下组件vue-search-highlight的使用,然后给出Vue中的搜索高亮的代码实现。
二、vue-search-highlight组件使用
组件功能如下:
关键词高亮
关键词匹配总数以及当前关键词的索引(即是第几个搜索结果)
查找上一个、下一个功能,调用相应函数即可跳到上一个或者下一个
// 如果使用yarn
yarn add vue-search-highlight
// 如果使用npm
npm install vue-search-highlight
vue-search-highlight本身是一个组件,在需要搜索高亮的页面里引入后,像正常的组件一样使用即可。
import SearchHighlight from 'vue-search-highlight'
// 注册为子组件
components: {
'search-highlight': SearchHighlight
},
![](https://filescdn.proginn.com/567170b91c64028008729467116fa95b/a8d2f533a97e2fb24f4fc9e4870a7d60.webp)
组件有两个重要的数据,即搜索匹配数量和当前关键词索引,会通过$emit弹射出来,如果需要展示搜索索引和匹配总数(比如 3 / 16),你可以监听组件的这两个事件:
![](https://filescdn.proginn.com/5e6fc546d25f79aa4efcd4531fca2ab4/cc82362a6d2d232a7b8e02e34d0c7932.webp)
你可以通过ref引用组件,直接调用组件内部的一些方法:
![](https://filescdn.proginn.com/b08c10ce1b23afbe7b2d2d4d40103f18/c95ce009132dcbf06f5ff1e950987797.webp)
class="search-highlight"
ref="search"
"currentChange" -change=
"matchCountChange" -count-change=
:content="content"
:keyword="keyword">
三、组件代码实现
class="search-highlight" v-html="contentShow">
![](https://filescdn.proginn.com/818a5591b95f1bc301cd1101d4b07e0d/b3bedf81f61cb2e6448e518f1b1c8c9a.webp)
评论