# HightLight-KeyWord

**Repository Path**: miss-tree/hight-light-key-word

## Basic Information

- **Project Name**: HightLight-KeyWord
- **Description**: 1、全文检索高亮检索的文字，或者在跳转后高亮关键字
2、给关键字设置样式或者点击事件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-06-13
- **Last Updated**: 2022-06-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## [详细信息](https://gitee.com/miss-tree/hight-light-key-word.git)





#### 关键字高亮
```
    example

    import {hightlight} from 'hightlight-keyword'

```
 >   Vue 使用

    <div v-html='hightlight(option)'></div>


 >   React 使用

    <div dangerouslySetInnerHTML={{
    	__html:hightlight({
            sourceText:source,
            keyWords:'零食',
          })
    }}></div>


#### option
```
    option = {
        sourceText:'', // 必填 文本
        keyWords:''||[], // 必填  关键字，可以是多个 
        // 自定义文字样式设置一个会覆盖未设置,若要使用的地方都不一样，每次使用都要设置样式 
        style:'background: #3d73d5;color: #fbfcff;cursor: pointer', 
    }   




```



#### 效果

![react-light](https://gitee.com/miss-tree/images/raw/master/react-light.png)







#### 点击事件

>  若是搜索的是一个手机号或是省份证，在高亮的同时想知道持有者的信息，就要点击查询，传参数
>
> 一般是作为一个全局的事件弹窗挂载到 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'
    } 



```



![react-light](https://gitee.com/miss-tree/images/raw/master/Dingtalk_20220622101626.jpg)