Vant4 Highlight 高亮文本

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from 'vue';
import { Highlight } from 'vant';

const app = createApp();
app.use(Highlight);

基础用法

你可以通过 keywords 指定需要高亮的关键字，通过 source-string 指定源文本。

<van-highlight :keywords="keywords" :source-string="text" />

export default {
  setup() {
    const text = '慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。';
    const keywords = '难题';

    return {
      text,
      keywords,
    };
  },
};

多字符匹配

如果需要指定多个关键字，可以以数组的形式传入 keywords。

<van-highlight :keywords="keywords" :source-string="text" />

export default {
  setup() {
    const text = '慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。';
    const keywords = ['难题', '终有一天', '答案'];

    return {
      text,
      keywords,
    };
  },
};

设置高亮标签类名

通过 highlight-class 可以设置高亮标签的类名，以便自定义样式。

<van-highlight
  :keywords="keywords"
  :source-string="text"
  highlight-class="custom-class"
/>

export default {
  setup() {
    const text = '慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。';
    const keywords = '生活';

    return {
      text,
      keywords,
    };
  },
};

.custom-class {
  color: red;
}

Props

类型定义

组件导出以下类型定义：

import type { HighlightProps, HighlightThemeVars } from 'vant';

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。