Preview Updated 2026-05-10

Highlight

Highlight matched keywords inside long text. Useful for search result lists and keyword markers.

Basic usage

text is the source text, match can be a string or a regex; string mode is case-insensitive by default.

背景

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

src/App.vue

<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>

import { CfHighlight } from '@chufix-design/react';

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

API

Prop	Type	Default	Description
`text`	`string`	`—`	Source text
`match`	`string \| RegExp`	`—`	Keyword or regex; no highlight when empty
`caseSensitive`	`boolean`	`false`	Whether to be case-sensitive in string mode