vue-search-highlight

Vue文本关键字高亮组件，v1.1.0开始支持HTML内容跨标签匹配关键字。

安装

``bash

使用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">



``