开发预览更新于 2026-05-10

Highlight 文本高亮

在长文本中高亮匹配的关键字，常用于搜索结果列表 / 命中关键词标记。

基础用法

text 是被高亮的原文，match 可以是字符串或正则；字符串模式默认大小写不敏感。

背景

ChuFix UI 是一个 Vue 3 与 React 双框架同源的基础组件库；CSS 变量主题、cf-* 类名前缀，纯 HTML/JS 项目也能直接用。

<script setup lang="ts">
import { ref } from 'vue';
import { CfHighlight, CfInput } from '@chufix-design/vue';

const text =
  'ChuFix UI 是一个 Vue 3 与 React 双框架同源的基础组件库；CSS 变量主题、cf-* 类名前缀，纯 HTML/JS 项目也能直接用。';
const q = ref('CSS');
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 8px;">
    <CfInput v-model="q" placeholder="输入关键字试试" style="max-width: 280px;" />
    <p style="margin: 0; line-height: 1.6;">
      <CfHighlight :text="text" :match="q" />
    </p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfHighlight, CfInput } from '@chufix-design/vue';

const text =
  'ChuFix UI 是一个 Vue 3 与 React 双框架同源的基础组件库；CSS 变量主题、cf-* 类名前缀，纯 HTML/JS 项目也能直接用。';
const q = ref('CSS');
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 8px;">
    <CfInput v-model="q" placeholder="输入关键字试试" style="max-width: 280px;" />
    <p style="margin: 0; line-height: 1.6;">
      <CfHighlight :text="text" :match="q" />
    </p>
  </div>
</template>

<CfHighlight text={text} match={q} />

<CfHighlight text={text} match={q} />

API

属性	类型	默认值	说明
`text`	`string`	`—`	原始文本
`match`	`string \| RegExp`	`—`	关键字或正则；为空时不高亮
`caseSensitive`	`boolean`	`false`	字符串模式下是否区分大小写