Highlight 高亮文本 - Vant 4

✨ Highlight 高亮文本

🎯 介绍

想让文本中的关键信息像明星一样闪闪发光吗？Highlight 组件就是你的专属聚光灯！🌟 它能精准定位并高亮显示文本中的重要内容，让用户一眼就能捕捉到关键信息。无论是搜索结果、关键词标注，还是重点内容提醒，都能轻松搞定！

💡 温馨提示：请升级 vant 到 >= 4.8.0 版本来使用这个超棒的组件哦！

📦 引入

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

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

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

🎯 代码演示

🔧 基础用法

只需要告诉 Highlight 组件哪些是"主角"（keywords），哪些是"剧本"（source-string），它就能自动为你的主角打上聚光灯！✨

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

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

🔍 多字符匹配

一个聚光灯不够用？没问题！Highlight 支持同时为多个关键词打光，让你的文本变成一场精彩的"群星闪耀"表演！🌟🌟🌟

<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; 
  font-weight: bold;
  background: linear-gradient(45deg, #ff6b6b, #feca57);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

API

Props

参数	说明	类型	默认值
auto-escape	是否自动转义特殊字符（让正则表达式字符变成普通字符）	boolean	true
case-sensitive	是否区分大小写（A 和 a 是不是一家人？）	boolean	false
highlight-class	高亮元素的专属类名（给明星定制服装）	string	-
highlight-tag	高亮元素的 HTML 标签名（明星的舞台类型）	string	span
keywords	需要高亮的关键词（今晚的主角们）	string | string[]	-
source-string	源文本内容（整个剧本）	string	-
tag	根节点的 HTML 标签名（整个舞台的类型）	string	div
unhighlight-class	非高亮元素的类名（配角们的服装）	string	-
unhighlight-tag	非高亮元素的 HTML 标签名（配角们的舞台类型）	string	span

类型定义

组件导出以下类型定义：

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

🎨 主题定制

样式变量

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

名称	默认值	描述
--van-highlight-tag-color	var(--van-primary-color)	高亮文本颜色（明星的专属光芒）

💡 使用技巧

1. 搜索场景：在搜索结果中高亮用户输入的关键词，提升查找效率
2. 内容标注：在文章或评论中标注重要信息，增强可读性
3. 关键词提醒：在长文本中突出显示需要注意的词汇
4. 多语言支持：配合 case-sensitive 属性处理不同语言的大小写规则

📚 相关文档

• Search 搜索 - 搜索功能的最佳搭档
• Tag 标签 - 另一种内容标记方式
• TextEllipsis 文本省略 - 长文本的优雅处理
• Cell 单元格 - 结构化内容展示
• Badge 徽标 - 数字或状态提醒
• Divider 分割线 - 内容区域分割
• Space 间距 - 组件间距控制