文本高亮 highlight

数据展示组件。三层同源：无头内核给出解剖与状态机，Vue 组件与自定义元素只是它的两层外壳，行为完全一致。

示例

基础用法

命中关键词的片段渲染成 <mark>，其余是纯文本；整段文本原样拼得回来

曦寒 UI 是一套框架无关的设计系统运行时，组件的行为与皮肤各走各的。

<script setup lang="ts">
import { XhHighlight } from "@xihan-ui/vue";

const text = "曦寒 UI 是一套框架无关的设计系统运行时，组件的行为与皮肤各走各的。";
</script>

<template>
  <XhHighlight :text="text" keyword="组件" />
</template>

一组关键词

传数组即可；同一处多个关键词都命中时取最长的那个，重叠只切出一段

曦寒 UI 是一套框架无关的设计系统运行时，组件的行为与皮肤各走各的。曦寒 UI 是一套框架无关的设计系统运行时，组件的行为与皮肤各走各的。

<script setup lang="ts">
import { XhHighlight } from "@xihan-ui/vue";

const text = "曦寒 UI 是一套框架无关的设计系统运行时，组件的行为与皮肤各走各的。";
const keywords = ["曦寒", "设计系统", "行为"];

// 「设计」与「设计系统」在同一处起跳，切出来的是长的那个
const overlapping = ["设计", "设计系统"];
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <XhHighlight :text="text" :keyword="keywords" />
    <XhHighlight :text="text" :keyword="overlapping" />
  </div>
</template>

区分大小写

缺省不区分，开了 case-sensitive 就按写法比

XiHan UI 与 xihan ui 是同一个名字的两种写法。XiHan UI 与 xihan ui 是同一个名字的两种写法。

<script setup lang="ts">
import { XhHighlight } from "@xihan-ui/vue";

const text = "XiHan UI 与 xihan ui 是同一个名字的两种写法。";
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <XhHighlight :text="text" keyword="ui" />
    <XhHighlight :text="text" keyword="ui" case-sensitive />
  </div>
</template>

跟着输入高亮

关键词逐字符比对、不拼进正则，敲进 . * ( 这些字符也只当普通字符找

曦寒 UI 1.0 发布说明版本 120 的兼容性清单取值写作 a*b 时的转义规则

<script setup lang="ts">
import { ref } from "vue";
import { XhHighlight } from "@xihan-ui/vue";

const keyword = ref("1.0");

const rows = [
  "曦寒 UI 1.0 发布说明",
  "版本 120 的兼容性清单",
  "取值写作 a*b 时的转义规则",
];
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <input v-model="keyword" placeholder="输入关键词" style="max-inline-size: 240px" />
    <XhHighlight v-for="row in rows" :key="row" :text="row" :keyword="keyword" />
  </div>
</template>

产物

层	值
自定义元素	<xh-highlight>
Vue 组件	XhHighlight
状态机	无，connect 直接由 props 算属性
皮肤	@xihan-ui/styles/highlight.css

解剖

部件名即 data-part 属性值，也是皮肤的选择器。加粗的是必备部件，不渲染它组件不工作（Web Components 适配器会在诊断通道上报 wc.missing-part）。

data-scope="highlight"：root · mark

Props

属性	类型	必填	说明
caseSensitive	boolean		区分大小写，缺省不区分。
keyword	string | readonly string[]		关键词，一个或一组。空串会被丢掉。
text	string		要显示的整段文本。命中位置按这个串逐字符算出来。

connect API

connect 产出的对象。getXxxProps() 铺到对应部件的宿主元素上，其余是可读状态与操作入口。

成员	类型	说明
text	string	解析后的文本；没给时是空串。
segments	readonly HighlightSegment[]	切好的片段，依次拼回去恒等于 text。
getRootProps	() => T['element']
getMarkProps	() => T['element']	铺到每个命中片段上的属性；每段都一样，命中的是哪个关键词不落到 DOM 上。

键盘

规格出处：W3C APG

无键盘交互（不接收焦点，或焦点行为完全由原生元素提供）。