代码演示
如何引入
Highlight 从 v2.24.0 版本开始支持
jsx
import { Highlight } from '@kousum/semi-ui-vue';基本用法
你可以通过 searchWords 指定需要高亮的关键字，通过 sourceString 指定源文本
指定高亮样式
默认情况下，高亮文本会自带文本样式，背景颜色 --semi-yellow-4, 文本颜色为黑色
暗色模式下，背景颜色为 --semi-yellow-2，文本颜色为白色
当你需要自定义不同的高亮样式时，你可以通过 highlightClassName, highlightStyle来指定
指定高亮标签
Semi 默认会将 sourceString 中与 searchWords 匹配的文本用 mark 标签包裹，你也可以通过 component 重新指定标签
API 参考
Highlight
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| searchWords | 期望高亮显示的文本 | string[] | '' |
| sourceString | 源文本 | string | |
| component | 高亮标签 | string | mark |
| highlightClassName | 高亮标签的样式类名 | ReactNode | - |
| highlightStyle | 高亮标签的内联样式 | ReactNode | - |
| caseSensitive | 是否大小写敏感 | false | - |
| autoEscape | 是否自动转义 | true | - |