Highlight 文本高亮

介绍

高亮指定文本内容，常用于关键字搜索。

基础用法

通过 keyword 属性来设置要高亮的文本。

<vd-highlight text="这是一段包含高亮文本的内容" keyword="高亮" />

多关键字匹配

将 keyword 属性设置为数组时，可匹配多个要高亮的文本。

<vd-highlight text="这是一段包含高亮文本的内容" :keyword="['高亮', '内容']" />

正则表达式匹配

通过 pattern 属性来设置正则表达式，用于匹配要高亮的文本。

<vd-highlight text="这是一段包含高亮Text的Content" :pattern="/[a-zA-Z]/g" />

自定义匹配颜色

通过 match-color 属性来设置匹配文本的颜色。

<vd-highlight text="这是一段包含高亮文本的内容" keyword="高亮" match-color="#1989fa" />

API

Props

参数	说明	类型	默认值
text	文本内容	string	-
keyword	高亮的关键字	string | string[]	-
pattern	高亮的文本匹配正则表达式，优先级高于 keyword	RegExp	-
ignore-case	忽略大小写，关键字匹配时生效	boolean	true
match-color	匹配文本颜色	string	-
match-class	匹配文本类名	ClassValue	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
updated	匹配更新时触发	HighlightOnUpdatedEvent