Statistic.Countdown 动画无显示

components/statistic/Countdown.tsx

@@ -47,7 +47,7 @@ export default defineComponent({
     startTimer() {
       if (this.countdownId) return;
       this.countdownId = window.setInterval(() => {
-        (this.$refs.statistic as any).$forceUpdate();
+        (this.$refs.statistic as any).updateStatisticNumber();
         this.syncTimer();
       }, REFRESH_INTERVAL);
     },

components/statistic/Number.tsx

@@ -1,53 +1,77 @@
 import padEnd from 'lodash-es/padEnd';
-import { FunctionalComponent, VNodeTypes } from 'vue';
+import { defineComponent, PropType, VNodeTypes } from 'vue';
 import { FormatConfig, valueType } from './utils';
 
+import initDefaultProps from '../_util/props-util/initDefaultProps';
 interface NumberProps extends FormatConfig {
   value: valueType;
 }
+import PropTypes from '../_util/vue-types';
+import { countdownValueType } from './utils';
+export const NumberProps = {
+  prefixCls: PropTypes.string,
+  decimalSeparator: PropTypes.string,
+  groupSeparator: PropTypes.string,
+  format: PropTypes.string,
+  value: {
+    type: [String, Number, Object] as PropType<countdownValueType>,
+  },
 
-const Number: FunctionalComponent<NumberProps> = props => {
-  const { value, formatter, precision, decimalSeparator, groupSeparator = '', prefixCls } = props;
-  let valueNode: VNodeTypes;
-
-  if (typeof formatter === 'function') {
-    // Customize formatter
-    valueNode = formatter({ value });
-  } else {
-    // Internal formatter
-    const val = String(value);
-    const cells = val.match(/^(-?)(\d*)(\.(\d+))?$/);
-    // Process if illegal number
-    if (!cells) {
-      valueNode = val;
+  valueRender: PropTypes.any,
+  formatter: PropTypes.any,
+  precision: PropTypes.number,
+};
+const StatisticNumber = defineComponent({
+  inheritAttrs: false,
+  props: initDefaultProps(NumberProps, {}),
+  render() {
+    const {
+      value,
+      formatter,
+      precision,
+      decimalSeparator,
+      groupSeparator = '',
+      prefixCls,
+    } = this.$props;
+    let valueNode: VNodeTypes;
+    if (typeof formatter === 'function') {
+      // Customize formatter
+      valueNode = formatter({ value });
     } else {
-      const negative = cells[1];
-      let int = cells[2] || '0';
-      let decimal = cells[4] || '';
+      // Internal formatter
+      const val = String(value);
+      const cells = val.match(/^(-?)(\d*)(\.(\d+))?$/);
+      // Process if illegal number
+      if (!cells) {
+        valueNode = val;
+      } else {
+        const negative = cells[1];
+        let int = cells[2] || '0';
+        let decimal = cells[4] || '';
 
-      int = int.replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator);
-      if (typeof precision === 'number') {
-        decimal = padEnd(decimal, precision, '0').slice(0, precision);
-      }
+        int = int.replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator);
+        if (typeof precision === 'number') {
+          decimal = padEnd(decimal, precision, '0').slice(0, precision);
+        }
 
-      if (decimal) {
-        decimal = `${decimalSeparator}${decimal}`;
-      }
+        if (decimal) {
+          decimal = `${decimalSeparator}${decimal}`;
+        }
 
-      valueNode = [
-        <span key="int" class={`${prefixCls}-content-value-int`}>
-          {negative}
-          {int}
-        </span>,
-        decimal && (
-          <span key="decimal" class={`${prefixCls}-content-value-decimal`}>
-            {decimal}
-          </span>
-        ),
-      ];
+        valueNode = [
+          <span key="int" class={`${prefixCls}-content-value-int`}>
+            {negative}
+            {int}
+          </span>,
+          decimal && (
+            <span key="decimal" class={`${prefixCls}-content-value-decimal`}>
+              {decimal}
+            </span>
+          ),
+        ];
+      }
     }
-  }
-
-  return <span class={`${prefixCls}-content-value`}>{valueNode}</span>;
-};
-export default Number;
+    return <span class={`${prefixCls}-content-value`}>{valueNode}</span>;
+  },
+});
+export default StatisticNumber;

components/statistic/Statistic.tsx

@@ -36,7 +36,11 @@ export default defineComponent({
       configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
-
+  methods: {
+    updateStatisticNumber() {
+      (this.$refs.statisticNumber as any).$forceUpdate();
+    },
+  },
   render() {
     const { prefixCls: customizePrefixCls, value = 0, valueStyle, valueRender } = this.$props;
     const { getPrefixCls } = this.configProvider;
@@ -52,7 +56,7 @@ export default defineComponent({
       value,
       formatter,
     };
-    let valueNode = <StatisticNumber {...props} />;
+    let valueNode = <StatisticNumber ref="statisticNumber" {...props} />;
     if (valueRender) {
       valueNode = valueRender(valueNode);
     }