hightlight-keyword
Version:
hightlight keyword plug-in unit[H[B[B[B[B[B[B[B[B[B[B[B[B[B[B[B[B[B[B[B[B[B[B[B[B[B[B[C[C[C[C[C[C[C[C[C[C[C[C a hight [3~[3~[3~[3~[3~[3~[3~[3~[3~[3~[3~[3~[3~[3~[3~
95 lines (51 loc) • 2.2 kB
Markdown
```
example
import {hightlight} from 'hightlight-keyword'
```
> Vue 使用
<div v-html='hightlight(option)'></div>
> React 使用
<div dangerouslySetInnerHTML={{
__html:hightlight({
sourceText:source,
keyWords:'零食',
})
}}></div>
```
option = {
sourceText:'', // 必填 文本
keyWords:''||[], // 必填 关键字，可以是多个
// 自定义文字样式设置一个会覆盖未设置,若要使用的地方都不一样，每次使用都要设置样式
style:'background: #3d73d5;color: #fbfcff;cursor: pointer',
}
```
> 若是搜索的是一个手机号或是省份证，在高亮的同时想知道持有者的信息，就要点击查询，传参数
>
> 一般是作为一个全局的事件弹窗挂载到 App.js页面 将处理的事件赋值给全局的事件，下面以react 为例
```javascript
componentDidMount() {
// window.keyEvent为点击的全局事件
window.keyEvent = this.event
}
event(param){
// 获取点击的节点参数
console.log("this is event",param)
let text = param.target.innerText
// text 为点击高亮的参数 用参数去接口请求
// 弹出弹窗 用请求道的参数展示数据
}
option = {
sourceText:'', // 必填 文本
keyWords:''||[], // 必填 关键字，可以是多个
style:'background: #3d73d5;color: #fbfcff;cursor: pointer', //自定义文字样式
// 直接通过设置的图片来添加点击事件 ！！！！最好不要用本地图片，用线上图片！！！！
imagesUrl:'https://pic3.zhimg.com/80/v2-35f2a750f699012eb0d205b03d945fb1_720w.jpg?source=1940ef5c'
}
```
