chore(countdown): split demo (#2854)

jdf2e · Jan 20, 2024 · 03a61ed · 03a61ed
1 parent b6cfca9
commit 03a61ed
Show file tree

Hide file tree

Showing 18 changed files with 312 additions and 892 deletions.
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/countdown/basic.vue b/packages/nutui-taro-demo/src/exhibition/pages/countdown/basic.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-countdown :start-time="start" :end-time="end"></nut-countdown>
+</template>
+
+<script setup>
+const start = Date.now();
+const end = Date.now() + 60 * 1000;
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/countdown/control.vue b/packages/nutui-taro-demo/src/exhibition/pages/countdown/control.vue
@@ -0,0 +1,21 @@
+<template>
+  <nut-space align="center">
+    <nut-countdown :end-time="end" :paused="paused" @paused="onPaused" @restart="onRestart" />
+    <nut-button size="small" @click="toggle">{{ paused ? 'start' : 'stop' }}</nut-button>
+  </nut-space>
+</template>
+<script setup>
+import { ref } from 'vue';
+const paused = ref(false);
+const end = ref(Date.now() + 60 * 1000);
+
+const toggle = () => {
+  paused.value = !paused.value;
+};
+const onPaused = (v) => {
+  console.log('paused: ', v);
+};
+const onRestart = (v) => {
+  console.log('restart: ', v);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/countdown/custom.vue b/packages/nutui-taro-demo/src/exhibition/pages/countdown/custom.vue
@@ -0,0 +1,38 @@
+<template>
+  <nut-countdown v-model="time" :end-time="end">
+    <nut-space>
+      <div class="countdown-item">{{ time.d }}</div>
+      <div>:</div>
+      <div class="countdown-item">{{ time.h }}</div>
+      <div>:</div>
+      <div class="countdown-item">{{ time.m }}</div>
+      <div>:</div>
+      <div class="countdown-item">{{ time.s }}</div>
+    </nut-space>
+  </nut-countdown>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const end = ref(Date.now() + 1000 * 60 * 60 * 24 * 12);
+const time = ref({
+  d: '1',
+  h: '00',
+  m: '00',
+  s: '00'
+});
+</script>
+
+<style>
+.countdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 25px;
+  height: 25px;
+  background: #e8220e;
+  color: #fff;
+  font-size: 14px;
+  border-radius: 6px;
+}
+</style>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/countdown/format.vue b/packages/nutui-taro-demo/src/exhibition/pages/countdown/format.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-countdown :end-time="time" format="DD 天 HH 时 mm 分 ss 秒" />
+</template>
+
+<script setup>
+const time = Date.now() + 60 * 1000;
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/countdown/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/countdown/index.vue
@@ -1,140 +1,50 @@
 <template>
   <Demo>
-    <h2>基础用法</h2>
-    <nut-cell>
-      <nut-countdown :end-time="state.end" @end="onend"></nut-countdown>
-    </nut-cell>
-    <h2>自定义格式</h2>
-    <nut-cell>
-      <nut-countdown :end-time="state.end" format="DD 天 HH 时 mm 分 ss 秒" />
-    </nut-cell>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <h2>毫秒级渲染</h2>
+    <h2>{{ t('format') }}</h2>
+    <Format />
 
-    <nut-cell>
-      <nut-countdown :end-time="state.end" millisecond format="HH:mm:ss:SS" />
-    </nut-cell>
+    <h2>{{ t('millisecond') }}</h2>
+    <Millisecond />
 
-    <h2>以服务端的时间为准</h2>
+    <h2>{{ t('control') }}</h2>
+    <Control />
 
-    <nut-cell>
-      <nut-countdown :start-time="state.serverTime" :end-time="state.end" />
-    </nut-cell>
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
 
-    <h2>异步更新结束时间</h2>
-
-    <nut-cell>
-      <nut-countdown :end-time="state.asyncEnd" />
-    </nut-cell>
-
-    <h2>控制开始和暂停的倒计时</h2>
-
-    <nut-cell>
-      <nut-countdown :end-time="state.end" :paused="state.paused" @paused="onpaused" @restart="onrestart" />
-      <div style="position: absolute; right: 10px; top: 9px">
-        <nut-button type="primary" size="small" @click="toggle">{{ state.paused ? 'start' : 'stop' }}</nut-button>
-      </div>
-    </nut-cell>
-
-    <h2>自定义展示样式</h2>
-
-    <nut-cell>
-      <span>
-        <nut-countdown v-model="state.resetTime" :end-time="state.end">
-          <div class="countdown-part-box">
-            <div class="part-item-symbol">{{ state.resetTime.d }}天</div>
-            <div class="part-item h">{{ state.resetTime.h }}</div>
-            <span class="part-item-symbol">:</span>
-            <div class="part-item m">{{ state.resetTime.m }}</div>
-            <span class="part-item-symbol">:</span>
-            <div class="part-item s">{{ state.resetTime.s }}</div>
-          </div>
-        </nut-countdown>
-      </span>
-    </nut-cell>
-
-    <h2>手动控制</h2>
-    <nut-cell>
-      <nut-countdown ref="Countdown" time="20000" :auto-start="false" format="ss:SS" />
-    </nut-cell>
-
-    <nut-grid :column-num="3">
-      <nut-grid-item><nut-button type="primary" @click="start">开始</nut-button></nut-grid-item>
-      <nut-grid-item><nut-button type="primary" @click="pause">暂停</nut-button></nut-grid-item>
-      <nut-grid-item><nut-button type="primary" @click="reset">重置</nut-button></nut-grid-item>
-    </nut-grid>
+    <h2>{{ t('ref') }}</h2>
+    <RefDemo />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, reactive } from 'vue';
-const Countdown = ref<any>(null);
-const state = reactive({
-  serverTime: Date.now() - 20 * 1000,
-  end: Date.now() + 60 * 1000,
-  starttime: Date.now(),
-  asyncEnd: 0,
-  paused: false,
-  resetTime: {
-    d: '1',
-    h: '00',
-    m: '00',
-    s: '00'
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Format from './format.vue';
+import Millisecond from './millisecond.vue';
+import Control from './control.vue';
+import Custom from './custom.vue';
+import RefDemo from './ref.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    format: '自定义格式',
+    millisecond: '毫秒级渲染',
+    control: '控制开始和暂停的倒计时',
+    custom: '自定义展示样式',
+    ref: 'Ref 方法'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    format: 'Custom Format',
+    millisecond: 'Millisecond',
+    control: 'Manual Control',
+    custom: 'Custom Style',
+    ref: 'Ref Methods'
   }
 });
-
-const toggle = () => {
-  state.paused = !state.paused;
-};
-const onend = () => {
-  console.log('countdown: ended.');
-};
-const onpaused = (v) => {
-  console.log('paused: ', v);
-};
-const onrestart = (v) => {
-  console.log('restart: ', v);
-};
-const start = () => {
-  Countdown.value.start();
-};
-
-const pause = () => {
-  Countdown.value.pause();
-};
-
-const reset = () => {
-  Countdown.value.reset();
-};
-onMounted(() => {
-  console.log(Countdown.value);
-});
-
-setTimeout(() => {
-  state.asyncEnd = Date.now() + 30 * 1000;
-}, 3000);
 </script>
-
-<style lang="scss">
-.countdown-part-box {
-  display: flex;
-  align-items: center;
-
-  .part-item {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 25px;
-    background: #e8220e;
-    color: #fff;
-    font-size: 14px;
-    border-radius: 6px;
-  }
-
-  .part-item-symbol {
-    margin: 0 5px;
-  }
-}
-</style>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/countdown/millisecond.vue b/packages/nutui-taro-demo/src/exhibition/pages/countdown/millisecond.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-countdown :end-time="time" millisecond format="HH:mm:ss:SS" />
+</template>
+
+<script setup>
+const time = Date.now() + 60 * 1000;
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/countdown/ref.vue b/packages/nutui-taro-demo/src/exhibition/pages/countdown/ref.vue
@@ -0,0 +1,21 @@
+<template>
+  <nut-space>
+    <nut-countdown ref="Countdown" time="20000" :auto-start="false" format="ss:SS" />
+    <nut-button size="mini" @click="start"> Start </nut-button>
+    <nut-button size="mini" @click="pause"> Pause </nut-button>
+    <nut-button size="mini" @click="reset"> Reset </nut-button>
+  </nut-space>
+</template>
+<script setup>
+import { ref } from 'vue';
+const Countdown = ref(null);
+const start = () => {
+  Countdown.value.start();
+};
+const pause = () => {
+  Countdown.value.pause();
+};
+const reset = () => {
+  Countdown.value.reset();
+};
+</script>