Skip to content

Commit fdc7f42

Browse files
committed
docs: 更新 CountUp 和 Highlight 组件文档
- 在 CountUp 组件文档中添加版本要求说明 - 新增 Highlight 组件文档,包括介绍、引入方式、代码演示和 API 说明
1 parent bf36be8 commit fdc7f42

2 files changed

Lines changed: 53 additions & 1 deletion

File tree

packages/vantui/src/count-up/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
### 介绍
44

5-
一般用于需要滚动数字到某一个值的场景。
5+
一般用于需要滚动数字到某一个值的场景。请升级 `@antmjs/vant``>= 3.6.3` 版本来使用该组件。
66

77
### 引入
88

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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 | 是否自动转义 | _&nbsp;&nbsp;boolean<br/>_ | true | `false` |
40+
| caseSensitive | 是否区分大小写 | _&nbsp;&nbsp;boolean<br/>_ | false | `false` |
41+
| highlightClass | 高亮元素的类名 | _&nbsp;&nbsp;string<br/>_ | - | `false` |
42+
| keywords | 期望高亮的文本 | _&nbsp;&nbsp;string&nbsp;&brvbar;&nbsp;string[]<br/>_ | - | `true` |
43+
| sourceString | 源文本 | _&nbsp;&nbsp;string<br/>_ | - | `true` |
44+
| unhighlightClass | 非高亮元素的类名 | _&nbsp;&nbsp;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);` |

0 commit comments

Comments
 (0)