LimeHighlight 高亮文本

• 参照 vant 实现的文本高亮, 作用是高亮指定文本内容

安装

在 导入即可

代码演示

基本使用

你可以通过 keywords 指定需要高亮的关键字，通过 text 指定文本。

<l-highlight keywords="难题" text="慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。" />

多字符匹配

如果需要指定多个关键字，以数组的形式传入 keywords。

<l-highlight :keywords="['难题', '终有一天', '答案']" text="慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。"  />

设置高亮标签类名

通过 highlight-class 可以设置高亮标签的类名，以便自定义样式。

<l-highlight keywords="生活" highlight-class="custom-class" text="慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。"  />

设置高亮样式

通过 highlight-style 可以设置高亮标签的样式。

<l-highlight keywords="生活" highlight-class="custom-class" text="慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。"  />

插槽

通过 插槽 可以自由设置样式。

<l-highlight keywords="生活" highlight-style="color: red" text="慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。" >
	<template #default="{item}">
		<text :style="{color: item.highlight? '#07c160': '#8e69d3'}">{{item.text}}</text>
	</template>
</l-highlight>

API

Props

参数	说明	类型	默认值
auto-escape	是否自动转义	boolean	true
case-sensitive	是否区分大小写	boolean	false
highlight-class	高亮元素的类名	string	-
highlight-style	高亮元素的样式	string	-
keywords	期望高亮的文本	string | string[]	-
text	源文本	string	-
unhighlight-class	非高亮元素的类名	string	-

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

源代码

组件源码