docs(countdown): update demo code #2656

jd-opensource · Nov 14, 2023 · 9edced3 · 9edced3
1 parent 493ce7e
commit 9edced3
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 116 deletions.
diff --git a/src/packages/__VUE/countdown/doc.en-US.md b/src/packages/__VUE/countdown/doc.en-US.md
@@ -128,7 +128,7 @@ const paused = ref(false);
 const end = ref(Date.now() + 60 * 1000);
 
 const toggle = () => {
-  state.paused = !state.paused;
+  paused.value = !paused.value;
 };
 const onPaused = (v) => {
   console.log('paused: ', v);
@@ -161,9 +161,9 @@ const onRestart = (v) => {
   </nut-cell>
 </template>
 <script setup>
-import { ref, reactive } from 'vue';
+import { ref } from 'vue';
 const end = ref(Date.now() + 60 * 1000);
-const resetTime = reactive({
+const resetTime = ref({
   d: '1',
   h: '00',
   m: '00',
@@ -232,46 +232,46 @@ const reset = () => {
 
 ### Props
 
-| Attribute       | Description                          | Type             | Default      |
-| --------------- | ------------------------------------ | ---------------- | ------------ |
-| v-model         | Current Time                         | object           | `{}`         |
-| start-time      | Start Time                           | string \| number | `Date.now()` |
-| end-time        | End Time                             | string \| number | `Date.now()` |
-| format          | Format Time                          | string           | `HH:mm:ss`   |
-| millisecond     | Whether to enable millisecond render | boolean          | `false`      |
-| auto-start      | Whether to auto start count down     | boolean          | `true`       |
-| time            | Total time, unit milliseconds        | string \| number | `0`          |
-| paused          | Paused                               | boolean          | `false`      |
-| show-days       | Show Text Day                        | boolean          | `false`      |
-| show-plain-text | Show Text                            | boolean          | `false`      |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model | Current Time | object | `{}` |
+| start-time | Start Time | string \| number | `Date.now()` |
+| end-time | End Time | string \| number | `Date.now()` |
+| format | Format Time | string | `HH:mm:ss` |
+| millisecond | Whether to enable millisecond render | boolean | `false` |
+| auto-start | Whether to auto start count down | boolean | `true` |
+| time | Total time, unit milliseconds | string \| number | `0` |
+| paused | Paused | boolean | `false` |
+| show-days | Show Text Day | boolean | `false` |
+| show-plain-text | Show Text | boolean | `false` |
 
 ### Format
 
-| Name | Description           |
-| ---- | --------------------- |
-| DD   | Day                   |
-| HH   | Hour                  |
-| mm   | Minute                |
-| ss   | Second                |
-| S    | Millisecond, 1-digit  |
-| SS   | Millisecond, 2-digits |
-| SSS  | Millisecond, 3-digits |
+| Name | Description |
+| --- | --- |
+| DD | Day |
+| HH | Hour |
+| mm | Minute |
+| ss | Second |
+| S | Millisecond, 1-digit |
+| SS | Millisecond, 2-digits |
+| SSS | Millisecond, 3-digits |
 
 ### Events
 
-| Event           | Description                     | Arguments          |
-| --------------- | ------------------------------- | ------------------ |
-| end`v4.1.5`     | Emitted when count down end     | Residual Timestamp |
-| paused`v4.1.5`  | Emitted when count down paused  | Residual Timestamp |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| end`v4.1.5` | Emitted when count down end | Residual Timestamp |
+| paused`v4.1.5` | Emitted when count down paused | Residual Timestamp |
 | restart`v4.1.5` | Emitted when count down restart | Residual Timestamp |
-| on-end          | Emitted when count down end     | Residual Timestamp |
-| on-paused       | Emitted when count down paused  | Residual Timestamp |
-| on-restart      | Emitted when count down restart | Residual Timestamp |
+| on-end | Emitted when count down end | Residual Timestamp |
+| on-paused | Emitted when count down paused | Residual Timestamp |
+| on-restart | Emitted when count down restart | Residual Timestamp |
 
 ### Methods
 
-| Name  | Description      |
-| ----- | ---------------- |
+| Name | Description |
+| --- | --- |
 | start | Count Down Start |
 | pause | Count Down Pause |
 | reset | Count Down Reset |
@@ -282,8 +282,8 @@ const reset = () => {
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                      | Default Value |
-| ------------------------- | ------------- |
-| --nut-countdown-display   | _flex_        |
-| --nut-countdown-color     | _inherit_     |
-| --nut-countdown-font-size | _initial_     |
+| Name | Default Value |
+| --- | --- |
+| --nut-countdown-display | _flex_ |
+| --nut-countdown-color | _inherit_ |
+| --nut-countdown-font-size | _initial_ |
diff --git a/src/packages/__VUE/countdown/doc.md b/src/packages/__VUE/countdown/doc.md
@@ -128,7 +128,7 @@ const paused = ref(false);
 const end = ref(Date.now() + 60 * 1000);
 
 const toggle = () => {
-  state.paused = !state.paused;
+  paused.value = !paused.value;
 };
 const onPaused = (v) => {
   console.log('paused: ', v);
@@ -161,9 +161,9 @@ const onRestart = (v) => {
   </nut-cell>
 </template>
 <script setup>
-import { ref, reactive } from 'vue';
+import { ref } from 'vue';
 const end = ref(Date.now() + 60 * 1000);
-const resetTime = reactive({
+const resetTime = ref({
   d: '1',
   h: '00',
   m: '00',
@@ -234,58 +234,58 @@ const reset = () => {
 
 ### Props
 
-| 参数        | 说明                                                       | 类型             | 默认值       |
-| ----------- | ---------------------------------------------------------- | ---------------- | ------------ |
-| v-model     | 当前时间，自定义展示内容时生效                             | object           | `{}`         |
-| start-time  | 开始时间                                                   | string \| number | `Date.now()` |
-| end-time    | 结束时间                                                   | string \| number | `Date.now()` |
-| format      | 时间格式                                                   | string           | `HH:mm:ss`   |
-| millisecond | 是否开启毫秒级渲染                                         | boolean          | `false`      |
-| auto-start  | 是否自动开始倒计时                                         | boolean          | `true`       |
-| time        | 倒计时显示时间，单位是毫秒。`auto-start` 为 `false` 时生效 | string \| number | `0`          |
-| paused      | 是否暂停                                                   | boolean          | `false`      |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 当前时间，自定义展示内容时生效 | object | `{}` |
+| start-time | 开始时间 | string \| number | `Date.now()` |
+| end-time | 结束时间 | string \| number | `Date.now()` |
+| format | 时间格式 | string | `HH:mm:ss` |
+| millisecond | 是否开启毫秒级渲染 | boolean | `false` |
+| auto-start | 是否自动开始倒计时 | boolean | `true` |
+| time | 倒计时显示时间，单位是毫秒。`auto-start` 为 `false` 时生效 | string \| number | `0` |
+| paused | 是否暂停 | boolean | `false` |
 
 ### format 格式
 
-| 格式 | 说明         |
-| ---- | ------------ |
-| DD   | 天数         |
-| HH   | 小时         |
-| mm   | 分钟         |
-| ss   | 秒数         |
-| S    | 毫秒（1 位） |
-| SS   | 毫秒（2 位） |
-| SSS  | 毫秒（3 位） |
+| 格式 | 说明 |
+| --- | --- |
+| DD | 天数 |
+| HH | 小时 |
+| mm | 分钟 |
+| ss | 秒数 |
+| S | 毫秒（1 位） |
+| SS | 毫秒（2 位） |
+| SSS | 毫秒（3 位） |
 
 ### Events
 
-| 事件名          | 说明         | 回调参数   |
-| --------------- | ------------ | ---------- |
-| end`v4.1.5`     | 倒计时结束时 | 剩余时间戳 |
-| paused`v4.1.5`  | 暂停时       | 剩余时间戳 |
-| restart`v4.1.5` | 暂停时       | 剩余时间戳 |
-| on-end          | 倒计时结束时 | 剩余时间戳 |
-| on-paused       | 暂停时       | 剩余时间戳 |
-| on-restart      | 暂停时       | 剩余时间戳 |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| end`v4.1.5` | 倒计时结束时 | 剩余时间戳 |
+| paused`v4.1.5` | 暂停时 | 剩余时间戳 |
+| restart`v4.1.5` | 暂停时 | 剩余时间戳 |
+| on-end | 倒计时结束时 | 剩余时间戳 |
+| on-paused | 暂停时 | 剩余时间戳 |
+| on-restart | 暂停时 | 剩余时间戳 |
 
 ### Methods
 
 通过 `ref` 可以获取到 `Countdown` 实例并调用实例方法。
 
-| 方法名 | 说明                                                         |
-| ------ | ------------------------------------------------------------ |
-| start  | 开始倒计时                                                   |
-| pause  | 暂停倒计时                                                   |
-| reset  | 重设倒计时，若 `auto-start`为 `true`，重设后会自动开始倒计时 |
+| 方法名 | 说明 |
+| --- | --- |
+| start | 开始倒计时 |
+| pause | 暂停倒计时 |
+| reset | 重设倒计时，若 `auto-start`为 `true`，重设后会自动开始倒计时 |
 
 ## 主题定制
 
 ### 样式变量
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                      | 默认值    |
-| ------------------------- | --------- |
-| --nut-countdown-display   | _flex_    |
-| --nut-countdown-color     | _inherit_ |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-countdown-display | _flex_ |
+| --nut-countdown-color | _inherit_ |
 | --nut-countdown-font-size | _initial_ |
diff --git a/src/packages/__VUE/countdown/doc.taro.md b/src/packages/__VUE/countdown/doc.taro.md
@@ -128,7 +128,7 @@ const paused = ref(false);
 const end = ref(Date.now() + 60 * 1000);
 
 const toggle = () => {
-  state.paused = !state.paused;
+  paused.value = !paused.value;
 };
 const onPaused = (v) => {
   console.log('paused: ', v);
@@ -161,9 +161,9 @@ const onRestart = (v) => {
   </nut-cell>
 </template>
 <script setup>
-import { ref, reactive } from 'vue';
+import { ref } from 'vue';
 const end = ref(Date.now() + 60 * 1000);
-const resetTime = reactive({
+const resetTime = ref({
   d: '1',
   h: '00',
   m: '00',
@@ -234,58 +234,58 @@ const reset = () => {
 
 ### Props
 
-| 参数        | 说明                                                       | 类型             | 默认值       |
-| ----------- | ---------------------------------------------------------- | ---------------- | ------------ |
-| v-model     | 当前时间，自定义展示内容时生效                             | object           | `{}`         |
-| start-time  | 开始时间                                                   | string \| number | `Date.now()` |
-| end-time    | 结束时间                                                   | string \| number | `Date.now()` |
-| format      | 时间格式                                                   | string           | `HH:mm:ss`   |
-| millisecond | 是否开启毫秒级渲染                                         | boolean          | `false`      |
-| auto-start  | 是否自动开始倒计时                                         | boolean          | `true`       |
-| time        | 倒计时显示时间，单位是毫秒。`auto-start` 为 `false` 时生效 | string \| number | `0`          |
-| paused      | 是否暂停                                                   | boolean          | `false`      |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 当前时间，自定义展示内容时生效 | object | `{}` |
+| start-time | 开始时间 | string \| number | `Date.now()` |
+| end-time | 结束时间 | string \| number | `Date.now()` |
+| format | 时间格式 | string | `HH:mm:ss` |
+| millisecond | 是否开启毫秒级渲染 | boolean | `false` |
+| auto-start | 是否自动开始倒计时 | boolean | `true` |
+| time | 倒计时显示时间，单位是毫秒。`auto-start` 为 `false` 时生效 | string \| number | `0` |
+| paused | 是否暂停 | boolean | `false` |
 
 ### format 格式
 
-| 格式 | 说明         |
-| ---- | ------------ |
-| DD   | 天数         |
-| HH   | 小时         |
-| mm   | 分钟         |
-| ss   | 秒数         |
-| S    | 毫秒（1 位） |
-| SS   | 毫秒（2 位） |
-| SSS  | 毫秒（3 位） |
+| 格式 | 说明 |
+| --- | --- |
+| DD | 天数 |
+| HH | 小时 |
+| mm | 分钟 |
+| ss | 秒数 |
+| S | 毫秒（1 位） |
+| SS | 毫秒（2 位） |
+| SSS | 毫秒（3 位） |
 
 ### Events
 
-| 事件名          | 说明         | 回调参数   |
-| --------------- | ------------ | ---------- |
-| end`v4.1.5`     | 倒计时结束时 | 剩余时间戳 |
-| paused`v4.1.5`  | 暂停时       | 剩余时间戳 |
-| restart`v4.1.5` | 暂停时       | 剩余时间戳 |
-| on-end          | 倒计时结束时 | 剩余时间戳 |
-| on-paused       | 暂停时       | 剩余时间戳 |
-| on-restart      | 暂停时       | 剩余时间戳 |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| end`v4.1.5` | 倒计时结束时 | 剩余时间戳 |
+| paused`v4.1.5` | 暂停时 | 剩余时间戳 |
+| restart`v4.1.5` | 暂停时 | 剩余时间戳 |
+| on-end | 倒计时结束时 | 剩余时间戳 |
+| on-paused | 暂停时 | 剩余时间戳 |
+| on-restart | 暂停时 | 剩余时间戳 |
 
 ### Methods
 
 通过 `ref` 可以获取到 `Countdown` 实例并调用实例方法。
 
-| 方法名 | 说明                                                         |
-| ------ | ------------------------------------------------------------ |
-| start  | 开始倒计时                                                   |
-| pause  | 暂停倒计时                                                   |
-| reset  | 重设倒计时，若 `auto-start`为 `true`，重设后会自动开始倒计时 |
+| 方法名 | 说明 |
+| --- | --- |
+| start | 开始倒计时 |
+| pause | 暂停倒计时 |
+| reset | 重设倒计时，若 `auto-start`为 `true`，重设后会自动开始倒计时 |
 
 ## 主题定制
 
 ### 样式变量
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                      | 默认值    |
-| ------------------------- | --------- |
-| --nut-countdown-display   | _flex_    |
-| --nut-countdown-color     | _inherit_ |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-countdown-display | _flex_ |
+| --nut-countdown-color | _inherit_ |
 | --nut-countdown-font-size | _initial_ |