docs: translate useCountDown (#8823)

This commit is contained in:
neverland 2021-06-07 20:54:43 +08:00 committed by GitHub
parent b3eec95bcd
commit bedf05bc58
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 123 additions and 7 deletions

View File

@ -0,0 +1,116 @@
# useCountDown
### Intro
Used to manage the countdown.
## Usage
### Basic Usage
```html
<span>Total time{{ current.total }}</span>
<span>Remain days{{ current.days }}</span>
<span>Remain hours{{ current.hours }}</span>
<span>Remain minutes{{ current.minutes }}</span>
<span>Remain seconds{{ current.seconds }}</span>
<span>Remain milliseconds{{ current.milliseconds }}</span>
```
```js
import { useCountDown } from '@vant/use';
export default {
setup() {
const countDown = useCountDown({
time: 24 * 60 * 60 * 1000,
});
countDown.start();
return {
current: countDown.current,
};
},
};
```
### Millisecond
```js
import { useCountDown } from '@vant/use';
export default {
setup() {
const countDown = useCountDown({
time: 24 * 60 * 60 * 1000,
millisecond: true,
});
countDown.start();
return {
current: countDown.current,
};
},
};
```
## API
### Type Declarations
```ts
type CurrentTime = {
days: number;
hours: number;
total: number;
minutes: number;
seconds: number;
milliseconds: number;
};
type CountDown = {
start: () => void;
pause: () => void;
reset: (totalTime: number) => void;
current: ComputedRef<CurrentTime>;
};
type UseCountDownOptions = {
time: number;
millisecond?: boolean;
onChange?: (current: CurrentTime) => void;
onFinish?: () => void;
};
function useCountDown(options: UseCountDownOptions): CountDown;
```
### Params
| Name | Description | Type | Default Value |
| --- | --- | --- | --- |
| time | Total time, unit milliseconds | _number_ | - |
| millisecond | Whether to enable millisecond render | _boolean_ | `false` |
| onChange | Triggered when count down changed | _(current: CurrentTime) => void_ | - |
| onFinish | Triggered when count down finished | - |
### Return Value
| Name | Description | Type |
| ------- | ------------------- | ----------------------- |
| current | Current remain time | _CurrentTime_ |
| start | Start count down | _() => void_ |
| pause | Pause count down | _() => void_ |
| reset | Reset count down | _(time?: number): void_ |
### CurrentTime Structure
| Name | Description | Type |
| ------------ | ----------------------------- | -------- |
| total | Total time, unit milliseconds | _number_ |
| days | Remain days | _number_ |
| hours | Remain hours | _number_ |
| minutes | Remain minutes | _number_ |
| seconds | Remain seconds | _number_ |
| milliseconds | Remain milliseconds | _number_ |

View File

@ -39,7 +39,7 @@ export default {
### 毫秒级渲染 ### 毫秒级渲染
倒计时默认每秒渲染一次,设置 millisecond 属性可以开启毫秒级渲染。 倒计时默认每秒渲染一次,设置 millisecond 选项可以开启毫秒级渲染。
```js ```js
import { useCountDown } from '@vant/use'; import { useCountDown } from '@vant/use';

View File

@ -130,7 +130,7 @@ export default {
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| time | Total time | _number \| string_ | `0` | | time | Total time, unit milliseconds | _number \| string_ | `0` |
| format | Time format | _string_ | `HH:mm:ss` | | format | Time format | _string_ | `HH:mm:ss` |
| auto-start | Whether to auto start count down | _boolean_ | `true` | | auto-start | Whether to auto start count down | _boolean_ | `true` |
| millisecond | Whether to enable millisecond render | _boolean_ | `false` | | millisecond | Whether to enable millisecond render | _boolean_ | `false` |
@ -160,7 +160,7 @@ export default {
| ------- | -------------- | -------------------------- | | ------- | -------------- | -------------------------- |
| default | Custom Content | _currentTime: CurrentTime_ | | default | Custom Content | _currentTime: CurrentTime_ |
### TimeData Structure ### CurrentTime Structure
| Name | Description | Type | | Name | Description | Type |
| ------------ | ----------------------------- | -------- | | ------------ | ----------------------------- | -------- |

View File

@ -822,10 +822,10 @@ module.exports = {
path: 'use-toggle', path: 'use-toggle',
title: 'useToggle', title: 'useToggle',
}, },
// { {
// path: 'use-count-down', path: 'use-count-down',
// title: 'useCountDown', title: 'useCountDown',
// }, },
// { // {
// path: 'use-rect', // path: 'use-rect',
// title: 'useRect', // title: 'useRect',