mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(RollingText): improve document (#12020)
This commit is contained in:
neverland
GitHub
parent
0f2967f3fb
commit
1ccf211ddd
@ -20,28 +20,18 @@ app.use(RollingText);
|
||||
|
||||
### Basic Usage
|
||||
|
||||
You can set the starting value with `start-num` and the target value with `target-num`. The RollingText component will automatically start the animation, rolling from the starting value to the target value.
|
||||
|
||||
```html
|
||||
<van-rolling-text
|
||||
:start-num="0"
|
||||
:target-num="123"
|
||||
:duration="2"
|
||||
:auto-start="false"
|
||||
direction="down"
|
||||
/>
|
||||
<van-rolling-text :start-num="0" :target-num="123" />
|
||||
```
|
||||
|
||||
### Set Rolling Direction
|
||||
|
||||
You can set the rolling direction of the number by using the `direction` property. `up` represents rolling up.
|
||||
You can set the rolling direction of the numbers using the `direction` prop. By default, it rolls downwards, but you can set it to `up` to roll upwards.
|
||||
|
||||
```html
|
||||
<van-rolling-text
|
||||
:start-num="0"
|
||||
:target-num="432"
|
||||
:duration="2"
|
||||
:auto-start="false"
|
||||
direction="up"
|
||||
/>
|
||||
<van-rolling-text :start-num="0" :target-num="432" direction="up" />
|
||||
```
|
||||
|
||||
### Set Stop Order
|
||||
@ -49,14 +39,7 @@ You can set the rolling direction of the number by using the `direction` propert
|
||||
You can set the order of stopping the animation of each digit through the `stop-order` prop. By default, it stops from the higher digits. Setting `rtl` can stop from the ones digit.
|
||||
|
||||
```html
|
||||
<van-rolling-text
|
||||
:start-num="0"
|
||||
:target-num="54321"
|
||||
:duration="2"
|
||||
:auto-start="false"
|
||||
stop-order="rtl"
|
||||
direction="up"
|
||||
/>
|
||||
<van-rolling-text :start-num="0" :target-num="54321" stop-order="rtl" />
|
||||
```
|
||||
|
||||
### Roll Non-numeric Text
|
||||
@ -64,13 +47,7 @@ You can set the order of stopping the animation of each digit through the `stop-
|
||||
You can reverse non-numeric content by using the `text-list` prop. The component will rolling from the first item to the last item in the array. Please make sure that the array length is greater than or equal to 2, and that each item has the same length.
|
||||
|
||||
```html
|
||||
<van-rolling-text
|
||||
:text-list="textList"
|
||||
:duration="1"
|
||||
:auto-start="false"
|
||||
stop-order="rtl"
|
||||
direction="up"
|
||||
/>
|
||||
<van-rolling-text :text-list="textList" :duration="1" />
|
||||
```
|
||||
|
||||
```js
|
||||
@ -94,15 +71,14 @@ export default {
|
||||
|
||||
### Custom Style
|
||||
|
||||
The RollingText component provides some CSS variables that you can override to customize the style, or you can directly modify the component's style. Additionally, you can set the height of the numbers using the `height` prop.
|
||||
|
||||
```html
|
||||
<van-rolling-text
|
||||
class="my-rolling-text"
|
||||
:height="54"
|
||||
:start-num="12345"
|
||||
:target-num="54321"
|
||||
:duration="2"
|
||||
stop-order="rtl"
|
||||
direction="up"
|
||||
:height="54"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -119,17 +95,14 @@ export default {
|
||||
|
||||
### Manual Control
|
||||
|
||||
After getting the component instance through `ref`, you can call the `start` and `reset` methods.
|
||||
After obtaining the component instance through `ref`, you can call the `start` and `reset` methods. The `start` method is used to start the animation, and the `reset` method is used to reset the animation.
|
||||
|
||||
```html
|
||||
<van-rolling-text
|
||||
ref="rollingTextRef"
|
||||
:start-num="0"
|
||||
:target-num="54321"
|
||||
:duration="2"
|
||||
:auto-start="false"
|
||||
stop-order="rtl"
|
||||
direction="up"
|
||||
/>
|
||||
<van-grid clickable :column-num="3">
|
||||
<van-grid-item icon="play-circle-o" :text="start" @click="start" />
|
||||
|
||||
@ -20,43 +20,26 @@ app.use(RollingText);
|
||||
|
||||
### 基础用法
|
||||
|
||||
你可以通过 `start-num` 设置起始数值，`target-num` 设置目标数值。RollingText 组件会自动开始动画，从起始数值翻滚到目标数值。
|
||||
|
||||
```html
|
||||
<van-rolling-text
|
||||
:start-num="0"
|
||||
:target-num="123"
|
||||
:duration="2"
|
||||
:auto-start="false"
|
||||
direction="down"
|
||||
/>
|
||||
<van-rolling-text :start-num="0" :target-num="123" />
|
||||
```
|
||||
|
||||
### 设置翻滚方向
|
||||
|
||||
可以通过 `direction` 属性设置数字的翻滚方向。`up` 表示向上翻滚。
|
||||
你可以通过 `direction` 属性设置数字的翻滚方向，默认为向下翻滚，设置为 `up` 即可向上翻滚。
|
||||
|
||||
```html
|
||||
<van-rolling-text
|
||||
:start-num="0"
|
||||
:target-num="432"
|
||||
:duration="2"
|
||||
:auto-start="false"
|
||||
direction="up"
|
||||
/>
|
||||
<van-rolling-text :start-num="0" :target-num="432" direction="up" />
|
||||
```
|
||||
|
||||
### 设置各数位停止顺序
|
||||
|
||||
可以通过 `stop-order` 属性设置动画各个数位的停止先后顺序。默认先停止高位。设置 `rtl` 可以先从个位停止。
|
||||
你可以通过 `stop-order` 属性设置动画各个数位的停止先后顺序。默认先停止高位，设置为 `rtl` 可以先从个位停止。
|
||||
|
||||
```html
|
||||
<van-rolling-text
|
||||
:start-num="0"
|
||||
:target-num="54321"
|
||||
:duration="2"
|
||||
:auto-start="false"
|
||||
stop-order="rtl"
|
||||
direction="up"
|
||||
/>
|
||||
<van-rolling-text :start-num="0" :target-num="54321" stop-order="rtl" />
|
||||
```
|
||||
|
||||
### 翻转非数字内容
|
||||
@ -64,13 +47,7 @@ app.use(RollingText);
|
||||
你可以使用 `text-list` 属性设置非数字内容的翻转。组件会从数组的第一项翻转到最后一项，请确保数组长度大于等于 2，以及每一项的长度一致。
|
||||
|
||||
```html
|
||||
<van-rolling-text
|
||||
:text-list="textList"
|
||||
:duration="1"
|
||||
:auto-start="false"
|
||||
stop-order="rtl"
|
||||
direction="up"
|
||||
/>
|
||||
<van-rolling-text :text-list="textList" :duration="1" />
|
||||
```
|
||||
|
||||
```js
|
||||
@ -94,15 +71,14 @@ export default {
|
||||
|
||||
### 自定义样式
|
||||
|
||||
RollingText 组件提供了一些 CSS 变量，你可以覆盖这些变量来自定义样式，也可以直接修改组件的样式。此外，你还可以通过 `height` 属性设置数字高度。
|
||||
|
||||
```html
|
||||
<van-rolling-text
|
||||
class="my-rolling-text"
|
||||
:height="54"
|
||||
:start-num="12345"
|
||||
:target-num="54321"
|
||||
:duration="2"
|
||||
stop-order="rtl"
|
||||
direction="up"
|
||||
:height="54"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -119,17 +95,14 @@ export default {
|
||||
|
||||
### 手动控制
|
||||
|
||||
通过 ref 获取到组件实例后，可以调用 `start`、`reset` 方法。
|
||||
通过 ref 获取到组件实例后，你可以调用 `start`、`reset` 方法，`start` 方法用于开始动画，`reset` 方法用于重置动画。
|
||||
|
||||
```html
|
||||
<van-rolling-text
|
||||
ref="rollingTextRef"
|
||||
:start-num="0"
|
||||
:target-num="54321"
|
||||
:duration="2"
|
||||
:auto-start="false"
|
||||
stop-order="rtl"
|
||||
direction="up"
|
||||
/>
|
||||
<van-grid clickable :column-num="3">
|
||||
<van-grid-item icon="play-circle-o" :text="start" @click="start" />
|
||||
@ -160,14 +133,14 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| start-num | 开始数值 | _number_ | `0` |
|
||||
| start-num | 起始数值 | _number_ | `0` |
|
||||
| target-num | 目标数值 | _number_ | - |
|
||||
| text-list | 内容数组，用于翻转非数字内容 | _string[]_ | `[]` |
|
||||
| duration | 动画时长，单位为秒 | _number_ | `2` |
|
||||
| direction | 文本翻滚方向，值为 `down` 和 `up` | _string_ | `down` |
|
||||
| auto-start | 是否自动开始动画 | _boolean_ | `true` |
|
||||
| stop-order | 各个数位动画停止先后顺序，值为 `ltr` 和 `rtl` | _string_ | `ltr` |
|
||||
| height | 数位高度，单位为 `px` | _number_ | `40` |
|
||||
| height | 数字高度，单位为 `px` | _number_ | `40` |
|
||||
|
||||
### 方法
|
||||
|
||||
|
||||
@ -61,13 +61,7 @@ const reset = () => {
|
||||
<template>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<div style="">
|
||||
<VanRollingText
|
||||
:start-num="0"
|
||||
:target-num="123"
|
||||
:duration="2"
|
||||
:auto-start="isStart"
|
||||
direction="down"
|
||||
/>
|
||||
<VanRollingText :start-num="0" :target-num="123" :auto-start="isStart" />
|
||||
<div style="margin-top: 10px">
|
||||
<Button @click="() => (isStart = true)" type="primary">{{
|
||||
t('rollDown')
|
||||
@ -81,7 +75,6 @@ const reset = () => {
|
||||
<VanRollingText
|
||||
:start-num="0"
|
||||
:target-num="432"
|
||||
:duration="2"
|
||||
:auto-start="isStart2"
|
||||
direction="up"
|
||||
/>
|
||||
@ -98,10 +91,8 @@ const reset = () => {
|
||||
<VanRollingText
|
||||
:start-num="0"
|
||||
:target-num="54321"
|
||||
:duration="2"
|
||||
:auto-start="isStart3"
|
||||
stop-order="rtl"
|
||||
direction="up"
|
||||
/>
|
||||
<div style="margin-top: 10px">
|
||||
<Button @click="() => (isStart3 = true)" type="primary">{{
|
||||
@ -117,8 +108,6 @@ const reset = () => {
|
||||
:text-list="textList"
|
||||
:duration="1"
|
||||
:auto-start="isStartNoNumberType"
|
||||
stop-order="rtl"
|
||||
direction="up"
|
||||
/>
|
||||
<div style="margin-top: 10px">
|
||||
<Button @click="() => (isStartNoNumberType = true)" type="primary">{{
|
||||
@ -134,10 +123,7 @@ const reset = () => {
|
||||
class="my-rolling-text"
|
||||
:start-num="12345"
|
||||
:target-num="54321"
|
||||
:duration="2"
|
||||
:auto-start="isStart4"
|
||||
stop-order="rtl"
|
||||
direction="up"
|
||||
:height="54"
|
||||
/>
|
||||
</div>
|
||||
@ -150,10 +136,7 @@ const reset = () => {
|
||||
ref="rollingTextRef"
|
||||
:start-num="0"
|
||||
:target-num="54321"
|
||||
:duration="2"
|
||||
:auto-start="false"
|
||||
stop-order="rtl"
|
||||
direction="up"
|
||||
:height="54"
|
||||
/>
|
||||
<van-grid clickable :column-num="2" style="margin-top: 10px">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user