HighlightText 高亮文本

基础用法

高亮文本组件，将文本中匹配关键词的片段以主题主色高亮，常用于搜索结果与关键词标注。

关键词支持字符串、字符串数组（优先匹配较长者）与正则表达式
默认按字面量转义正则字符、不区分大小写；点击高亮片段派发事件
提供与 sn-text 一致的预设样式，可限制行数并支持长按选中

vue

<template>
	<sn-highlight-text text="SinleUI 是面向 uni-app x 的轻量 UI 框架" keywords="uni-app x"></sn-highlight-text>
</template>

更多演示请下载 demo 查看

搜索场景

搜索词实时驱动正文高亮，配合 sn-search 使用。

vue

<template>
	<sn-search v-model="keyword" placeholder="输入关键词"></sn-search>
	<sn-highlight-text :text="content" :keywords="keyword"></sn-highlight-text>
</template>

<script lang="ts" setup>
const keyword = ref<string>('组件')
const content = ref<string>('SinleUI 提供统一的组件样式、主题能力和跨平台交互。')
</script>

属性

参数	说明	类型	默认值	可选值
text	文本内容	String	`''`	-
keywords	高亮关键词，支持单个关键词、关键词数组或正则表达式	String \| String[] \| RegExp	`''`	-
autoEscape	是否自动转义关键词中的正则特殊字符（按字面量匹配）	Boolean	`true`	`true` \| `false`
caseSensitive	是否区分大小写	Boolean	`false`	`true` \| `false`
type	预设文字样式类型，决定默认字号与颜色	String	`text`	`title` \| `text` \| `text-light` \| `primary` \| `info` \| `success` \| `warning` \| `error`
fontSize	文本字号，按 `type` 取默认字号（title 为 16、其余为 14）并乘字体乘数	String \| Number	-	-
color	文本颜色，按 `type` 取对应主题色	String	-	-
bold	是否加粗（font-weight: 600）	Boolean	`false`	`true` \| `false`
lines	最大显示行数，`0` 不限制	Number	`0`	-
selectable	文本是否可选中（蒸汽模式）	Boolean	`false`	`true` \| `false`
customStyle	自定义根节点样式	SnStyleValue	`''`	-
customClass	根节点外部类	String	`''`	-
textStyle	自定义普通文本片段样式	SnStyleValue	`''`	-
textClass	普通文本片段外部类	String	`''`	-
highlightStyle	自定义高亮片段样式	SnStyleValue	`''`	-
highlightClass	高亮片段外部类	String	`''`	-

事件

名称	类型	说明
highlight-click	(detail: HighlightClickDetail) => Void	点击高亮片段时触发。detail 包含：`text`（片段文本）、`index`（第几个高亮片段，从 0 开始）、`start` / `end`（在原文中的起止位置）

HighlightText 高亮文本 ​

基础用法 ​

搜索场景 ​

属性 ​

事件 ​

HighlightText 高亮文本

基础用法

搜索场景

属性

事件