hightlight-keyword v1.0.5

详细信息

关键字高亮

    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', 
    }   

效果

点击事件

若是搜索的是一个手机号或是省份证，在高亮的同时想知道持有者的信息，就要点击查询，传参数

一般是作为一个全局的事件弹窗挂载到 App.js页面 将处理的事件赋值给全局的事件，下面以react 为例

	

	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'
    }