ohlight

一个基于 web components 的跨框架/库（vue、react等）、无框架的高亮划词组件。无需任何挂载注册，只需引入js文件就可以直接在项目中使用。

注：目前仅支持浏览器环境。

项目地址

gitee: 点击前往

github: 点击前往

安装

// pnpm 
pnpm i ohlight

// npm
npm i ohlight

// yarn
yarn add ohlight

使用

<o-light></o-light>

<script type="module">
    import { oLight } from "ohlight"
</script>

1、基础使用

<o-light content="清道夫" keywords="清"></o-light>

<script type="module">
    import { oLight } from "ohlight"
</script>

2、多个关键词

<o-light content="清道夫" keywords="清,夫"></o-light>

<script type="module">
    import { oLight } from "ohlight"
</script>

3、自定义高亮样式

自定义样式需要使用一个序列化CSSStyleDeclaration后的对象字符串，详细内容可以看下方的api说明。

<o-light content="清道夫" keywords="清" :styles="style"></o-light>

<script setup>
const style =  JSON.stringify({
    color: 'red',
    background: 'aliceblue',
    'font-style': 'oblique'
})
</script>

<script type="module">
    import { oLight } from "ohlight"
</script>

4、vue 中使用

这里使用的是vue3，vue2中是差不多的。在vue中需要注意的是要过滤掉组件的注册解析。具体过滤方法可以看下面的配置示例。

使用示例

<template>
    <div>
        <o-light content="清道夫"
         keywords="清" 
         :styles="style"
        ></o-light>
    </div>
</template>


<script type="module">
    import { oLight } from "ohlight"
</script>

<script setup>
import {ref} from "vue"

let style = JSON.stringify({
    color: 'red',
    background: 'aliceblue',
    'font-style': 'oblique'
})

</script>

浏览器内配置示例

//仅当使用浏览器内编译时有效
app.config.compilerOptions.isCustomElement = tag => tag.includes('-')

Vite配置示例

//vite.config.js
export default {
	plugins:[
		vue({
			template:{
				compilerOptions:{
					//将所有包含短横线的标签作为自定义元素处理
					isCustomElement:tag => tag.includes('-')
				}
			}
		})
	]
}

Vue CLI配置示例

//vue.config.js
module.exports = {
	chainWebpack:config => {
		config.module
			.rule('vue')
			.use('vue-loader')
			.tap(option => ({
				...options,
				compilerOptions:{
					//将所有以ion-开头的标签作为自定义元素处理
					isCustomElement:tag => tag.startsWith('ion-')
				}
			}))
	}
}

5、react 中使用

import {oLight} from "ohlight"

<o-light content="章三积分快到了时间" keywords="章三"></o-light>

6、获取组件实例并操作组件

<o-light content="清道夫" keywords="清" :styles="style" @load="load"></o-light>

<script setup>
const style =  JSON.stringify({
    color: 'red',
    background: 'aliceblue',
    'font-style': 'oblique'
})

const load = (e) => {
    // e.detail.shadowRoot.children[0].style.background = 'red'
}
</script>

<script type="module">
    import { oLight } from "ohlight"
</script>

组件实例说明

由于采用的web components中shadowRoot的方法实现，故需要操作dom的话则需要操作其真实dom才会达到效果，这里我用load方法的回调将组件实例返回。需要操作dom则需要通过event.detail.shadowRoot.children[0]的形式拿到真实可以操作的dom。当然，你如果仅仅只是操作表层（如：控制隐藏/显示等）的话则不需要获取到真实dom。

Api

属性

| 属性名 | 类型 | 描述 | 默认值 | |--|--|--|--| | content | string | 文本内容 | - | | keywords | string | 关键词字符串，多个关键词使用'','隔开 | - | | styles | string | 高亮关键字样式，仅支持序列化后的CSSStyleDeclaration对象；注：涉及到驼峰写法的需要改写成 - 连接；如：fontStyle 需要写成 font-style | - | | stableTime | string ｜ number | 防抖时间，单位：(ms) | 200 |

事件

所有的事件内容均在event.detail中。

| 事件名 | 类型 | 描述 | 默认值 | |--|--|--|--| | load | Function | 该方法在组件绘制完成并挂载后触发，返回当前组件实例，内容在event.detail中，可供操作dom使用等 | - | | connectedCallback | Function | 当自定义元素第一次被连接到文档 DOM 时被调用 | - | | disconnectedCallback | Function | 当自定义元素与文档 DOM 断开连接时被调用 | - | | adoptedCallback | Function | 当自定义元素被移动到新文档时被调用 | - | | attributeChangedCallback | Function | 当自定义元素的一个属性被增加、移除或更改时被调用。 | - |

浏览器支持情况

| chrome | edge | firefox | opera | safari | |--|--|--|--|--| | 53+ | 79+ | 63+ | 40+ | 10+ |