File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 22
33### 介绍
44
5- 一般用于需要滚动数字到某一个值的场景。
5+ 一般用于需要滚动数字到某一个值的场景。请升级 ` @antmjs/vant ` 到 ` >= 3.6.3 ` 版本来使用该组件。
66
77### 引入
88
Original file line number Diff line number Diff line change 1+ # Highlight 高亮文本
2+
3+ ### 介绍
4+
5+ 高亮指定文本内容。请升级 ` @antmjs/vant ` 到 ` >= 3.6.6 ` 版本来使用该组件。
6+
7+ ### 引入
8+
9+ 在 Taro 文件中引入组件
10+
11+ ``` js
12+ import { Highlight } from ' @antmjs/vantui'
13+ ```
14+
15+ ## 代码演示
16+
17+ ### 基础用法
18+
19+ 你可以通过 ` keywords ` 指定需要高亮的关键字,通过 ` sourceString ` 指定源文本。
20+
21+ ::: $demo1 :::
22+
23+ ### 多字符匹配
24+
25+ 如果需要指定多个关键字,可以以数组的形式传入 ` keywords ` 。
26+
27+ ::: $demo2 :::
28+
29+ ### 设置高亮标签类名
30+
31+ 通过 ` highlightClass ` 可以设置高亮标签的类名,以便自定义样式。
32+
33+ ::: $demo3 :::
34+
35+ ### HighlightProps [[ 详情]] ( https://github.com/AntmJS/vantui/tree/main/packages/vantui/types/highlight.d.ts )
36+
37+ | 参数 | 说明 | 类型 | 默认值 | 必填 |
38+ | ---------------- | ---------------- | ----------------------------------------------------- | ------ | ------- |
39+ | autoEscape | 是否自动转义 | _   ;  ; boolean<br />_ | true | ` false ` |
40+ | caseSensitive | 是否区分大小写 | _   ;  ; boolean<br />_ | false | ` false ` |
41+ | highlightClass | 高亮元素的类名 | _   ;  ; string<br />_ | - | ` false ` |
42+ | keywords | 期望高亮的文本 | _   ;  ; string  ;¦ ;  ; string[ ] <br />_ | - | ` true ` |
43+ | sourceString | 源文本 | _   ;  ; string<br />_ | - | ` true ` |
44+ | unhighlightClass | 非高亮元素的类名 | _   ;  ; string<br />_ | - | ` false ` |
45+
46+ ### 样式变量
47+
48+ 组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考[ ConfigProvider 组件] ( https://antmjs.github.io/vantui/#/config-provider )
49+
50+ | 名称 | 默认值 |
51+ | ---------------------- | ------------------------ |
52+ | --highlight-text-color | ` var(--primary-color); ` |
You can’t perform that action at this time.
0 commit comments