Vue文本关键字高亮组件,v1.1.0开始支持HTML内容跨标签匹配关键字。
npm install vue-search-highlightbash
使用yarn
yarn add vue-search-highlight使用npm
npm install vue-search-highlight
`引入组件
像使用普通组件一样使用vue-search-highlight。
`js
import SearchHighlight from 'vue-search-highlight'
// 注册为子组件
components: {
'search-highlight': SearchHighlight
},
`组件props
| 名称 | 说明 |
| --- | --- |
| content | 需要展示的文本,搜索即在这个文本中进行。 |
| keyword | 搜索关键字 |
| highlightStyle | 所有关键词高亮的样式, 默认'background: #ffff00' |
| currentStyle | 当前搜索到的关键词样式, 默认default: 'background: #ff9632' |
| regExp | 启用正则匹配,会用关键词构建一个正则表达式来匹配。启用时请确保keyword能正确构造正则表达式,并且不会匹配空串,否则组件将不会匹配任何内容 |组件事件
| 事件名 | 说明 |
| --- | --- |
| @current-change | 返回值:当前关键词索引(从1开始)。关键词改变的时候,如果搜索到内容,会返回1,搜索不到则返回0。 |
| @match-count-change | 返回值:文本匹配关键词总数。 |组件方法,可以通过ref调用
主要提供了关键词滚动到可视区域的方法:
| 方法名 | 参数 | 说明 |
| --- | --- | --- |
| searchNext | 无 | 下一个关键词滚动到可视区域 |
| searchLast | 无 | 上一个关键词滚动到可视区域 |
| scrollTo | index | 滚动到第index(从1开始)个关键词 |使用示例:
效果在线预览:https://wintc.top/laboratory/#/search-highlight代码示例
`html
class="search-highlight"
ref="search"
@current-change="currentChange"
@match-count-change="matchCountChange"
:content="content"
:keyword="keyword">
``