fix: a-statistic-countdown slots error (#4996)

* 🎈 fix countdown slot Bug * ✨ review change
vueComponent · Dec 8, 2021 · ee3188a · ee3188a
1 parent 3b1510b
commit ee3188a
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 1 deletion.
diff --git a/components/statistic/Countdown.tsx b/components/statistic/Countdown.tsx
@@ -16,7 +16,7 @@ export default defineComponent({
     format: 'HH:mm:ss',
   }),
   emits: ['finish', 'change'],
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const countdownId = ref<any>();
     const statistic = ref();
     const syncTimer = () => {
@@ -84,6 +84,7 @@ export default defineComponent({
             valueRender: valueRenderHtml,
             formatter: formatCountdown,
           }}
+          v-slots={slots}
         />
       );
     };

diff --git a/components/statistic/demo/countdown-slot.vue b/components/statistic/demo/countdown-slot.vue
@@ -0,0 +1,68 @@
+<docs>
+---
+order: 4
+title:
+  zh-CN: 倒计时组件
+  en-US: Countdown
+---
+
+## zh-CN
+
+倒计时组件使用插槽。
+
+## en-US
+
+Countdown component slots.
+
+</docs>
+
+<template>
+  <a-row :gutter="16">
+    <a-col :span="12">
+      <a-statistic-countdown :value="deadline" style="margin-right: 50px" @finish="onFinish">
+        <template #title>
+          <span>Countdown</span>
+          <a-tooltip placement="right">
+            <template #title>
+              <span>hurry up!</span>
+            </template>
+            <question-circle-two-tone style="margin-left: 5px" />
+          </a-tooltip>
+        </template>
+      </a-statistic-countdown>
+    </a-col>
+    <a-col :span="24" style="margin-top: 32px">
+      <a-statistic-countdown
+        title="Million Seconds countdown"
+        :value="deadline"
+        format="HH:mm:ss:SSS"
+        style="margin-right: 50px"
+      >
+        <template #prefix>
+          <span>There's only</span>
+        </template>
+        <template #suffix>
+          <span>left for the end.</span>
+        </template>
+      </a-statistic-countdown>
+    </a-col>
+  </a-row>
+</template>
+<script lang="ts">
+import { QuestionCircleTwoTone } from '@ant-design/icons-vue';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  components: {
+    QuestionCircleTwoTone,
+  },
+  setup() {
+    const onFinish = () => {
+      console.log('finished!');
+    };
+    return {
+      deadline: Date.now() + 1000 * 60 * 60 * 20 * 2,
+      onFinish,
+    };
+  },
+});
+</script>
diff --git a/components/statistic/demo/index.vue b/components/statistic/demo/index.vue
@@ -4,13 +4,15 @@
     <unit />
     <card />
     <countdown />
+    <countdown-slot />
   </demo-sort>
 </template>
 <script lang="ts">
 import Basic from './basic.vue';
 import Unit from './unit.vue';
 import Card from './card.vue';
 import Countdown from './countdown.vue';
+import CountdownSlot from './countdown-slot.vue';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 import { defineComponent } from 'vue';
@@ -22,6 +24,7 @@ export default defineComponent({
     Unit,
     Card,
     Countdown,
+    CountdownSlot,
   },
   setup() {
     return {};