fix(statistic): 优化文档 ts问题 插槽 不居中问题 暂时隐藏showGroupSeparator属性

packages/devui-vue/devui/statistic/src/statistic-types.ts

@@ -19,11 +19,11 @@ export const statisticProps = {
   },
   groupSeparator: {
     type: String,
-    default: ','
+    default: ''
   },
   showGroupSeparator: {
     type: Boolean,
-    default: false
+    default: true
   },
   titleStyle: {
     type: Object as PropType<CSSProperties>

packages/devui-vue/devui/statistic/src/statistic.scss

@@ -21,11 +21,13 @@
   &-prefix {
     margin-right: 6px;
     display: flex;
+    align-items: center;
   }
 
   &-suffix {
     margin-left: 6px;
     display: flex;
+    align-items: center;
   }
 
   &--value {

packages/devui-vue/devui/statistic/src/utils/animation.ts

@@ -72,7 +72,7 @@ export class Tween {
     this.keys = {}
   }
 
-  update() {
+  update(): void {
     this.time = Date.now()
     // delay some time
     if (this.time < this.startTime) {
@@ -107,7 +107,7 @@ export class Tween {
   }
 
   // 递归 重绘
-  start() {
+  start(): void {
     this.startTime = Date.now() + this.delay
     const tick = () => {
       this.update()
@@ -122,7 +122,7 @@ export class Tween {
     tick()
   }
 
-  stop() {
+  stop(): void {
     cancelAnimationFrame(this.timer)
     this.timer = null
   }

packages/devui-vue/devui/statistic/src/utils/easing.ts

@@ -2,15 +2,15 @@
 const pow = Math.pow
 const sqrt = Math.sqrt
 
-export const easeOutCubic = function (x: number) {
+export const easeOutCubic = function (x: number): number {
   return 1 - pow(1 - x, 3)
 }
-export const linear = (x) => x
-export const easeOutExpo = function (x: number) {
+export const linear = (x: number): number => x
+export const easeOutExpo = function (x: number): number {
   return x === 1 ? 1 : 1 - pow(2, -10 * x)
 }
 
-export const easeInOutExpo = function (x: number) {
+export const easeInOutExpo = function (x: number): number {
   return x === 0
     ? 0
     : x === 1
@@ -19,9 +19,9 @@ export const easeInOutExpo = function (x: number) {
     ? pow(2, 20 * x - 10) / 2
     : (2 - pow(2, -20 * x + 10)) / 2
 }
-export const easeInExpo = function (x: number) {
+export const easeInExpo = function (x: number): number {
   return x === 0 ? 0 : pow(2, 10 * x - 10)
 }
-export const easeInOutCirc = function (x: number) {
+export const easeInOutCirc = function (x: number): number {
   return x < 0.5 ? (1 - sqrt(1 - pow(2 * x, 2))) / 2 : (sqrt(1 - pow(-2 * x + 2, 2)) + 1) / 2
 }

packages/devui-vue/docs/components/statistic/index.md

@@ -14,14 +14,14 @@
     <d-col :span="12">
       <d-statistic
         title="Users Sales"
-        :value="5201314"
-        style="position: absolute">
-      </d-statistic>
-
+        group-separator=","
+        :value="5201314" />
     </d-col>
     <d-col :span="12">
-      <d-statistic title="Account Weekly Sales (CNY)" :value="999999" 
-       />
+      <d-statistic
+        title="Account Weekly Sales (CNY)"
+        group-separator="."
+        :value="999999" />
     </d-col>
   </d-cow>
 </template>
@@ -39,13 +39,7 @@
   <d-row :gutter="16">
     <d-col :span="12">
       <d-card>
-        <d-statistic
-          title="Growth Rate"
-          :value="68.28"
-          :precision="3"
-          suffix="%"
-          :content-style="{ color: '#3f8600' }"
-        >
+        <d-statistic title="Growth Rate" :value="68.28" :precision="3" suffix="%">
           <template #prefix>
             <d-icon name="experice-new" />
           </template>
@@ -54,13 +48,7 @@
     </d-col>
     <d-col :span="12">
       <d-card>
-        <d-statistic
-          title="Decline Rate"
-          :value="38.3"
-          suffix="%"
-          class="demo-class"
-          :content-style="{ color: '#cf1322' }"
-        >
+        <d-statistic title="Decline Rate" :value="38.3" suffix="%">
           <template #prefix>
             <d-icon name="bold" />
           </template>
@@ -87,30 +75,28 @@
           title="Animation Growth Rate"
           :value="88.265"
           suffix="%"
-          :content-style="{ color: '#3f8600' }"
           :value-from="0"
           :start="start"
           :animation-duration="5000"
           animation
-        >
-        </d-statistic>
+        ></d-statistic>
       </d-card>
     </d-col>
     <d-col :span="12">
       <d-card>
         <d-statistic
           title="Animation Decline Rate"
-          value="53.333"
-          :precision="0"
-          suffix="%"
-          class="demo-class"
-          :content-style="{ color: '#cf1322' }"
+          value="53"
+          :precision="3"
           :value-from="0"
           :start="controlStart"
           animation
         >
+          <template #suffix>
+            <span>%</span>
+            <d-button @click="controlStart = true">Start</d-button>
+          </template>
         </d-statistic>
-        <d-button @click="controlStart = true">Start</d-button>
       </d-card>
     </d-col>
   </d-row>
@@ -120,10 +106,10 @@ export default {
   data() {
     return {
       start: true,
-      controlStart: false,
-    };
-  },
-};
+      controlStart: false
+    }
+  }
+}
 </script>
 ```
 
@@ -144,9 +130,7 @@ export default {
         :showGroupSeparator="true"
         style="margin-right: 50px"
       >
-        <template #suffix>
-          %
-        </template>
+        <template #suffix>%</template>
       </d-statistic>
     </d-col>
     <d-col :span="12">
@@ -162,23 +146,57 @@ export default {
 
 :::
 
+### 自定义样式
+
+提供自定义属性方便添加样式
+:::demo
+
+```vue
+<template>
+  <d-row :gutter="16">
+    <d-col :span="12">
+      <d-statistic
+        title="Custom Style"
+        :value="88"
+        :content-style="{ color: '#fba' }"
+        :title-style="{ color: '#abf' }"
+      >
+        <template #suffix>%</template>
+      </d-statistic>
+    </d-col>
+    <d-col :span="12">
+      <d-statistic
+        title="Scale"
+        :value="5000"
+        group-separator="."
+        :precision="3"
+        prefix="$"
+        :content-style="{ fontSize: '30px', color: '#5e7ce0'}"
+      >
+    </d-col>
+  </d-row>
+</template>
+```
+
+:::
+
 ### d-statistic
 
-| 参数 | 类型 | 默认 | 说明 |
-| :---: | :---: | :---: | :---: |
-| title              | `string \| v-slot` | - | 数值的标题 |
-| extra              | `string \| v-slot` | - | 额外内容 |
-| value              | `number \| string` | - | 数值内容 |
-| group-separator    | `string`           | - | 设置千分位标识符 |
-| precision          | `number`           | - | 设置数值精度     |
-| suffix             | `string \| v-slot` | - | 设置数值的后缀   |
-| prefix             | `string \| v-slot` | -        | 设置数值的前缀   |
-| title-style        | `style`            | -        | 标题样式         |
-| content-style      | `style`            | -        | 内容样式         |
-| animation-duration | `number`           | 2000     | 动画持续时间     |
-| delay              | `number`           | 0        | 延迟进行动画时间 |
-| value-from         | `number`           | 0        | 动画初始值       |
-| animation          | `boolean`          | false    | 是否开启动画     |
-| easing             | `string`           | quartOut | 数字动画效果     |
-| start              | `boolean`          | false    | 是否开始动画     |
+|        参数        |        类型        |   默认   |       说明       |
+| :----------------: | :----------------: | :------: | :--------------: |
+|       title        | `string \| v-slot` |    -     |    数值的标题    |
+|       extra        | `string \| v-slot` |    -     |     额外内容     |
+|       value        | `number \| string` |    -     |     数值内容     |
+|  group-separator   |      `string`      |    -     | 设置千分位标识符 |
+|     precision      |      `number`      |    -     |   设置数值精度   |
+|       suffix       | `string \| v-slot` |    -     |  设置数值的后缀  |
+|       prefix       | `string \| v-slot` |    -     |  设置数值的前缀  |
+|    title-style     |      `style`       |    -     |     标题样式     |
+|   content-style    |      `style`       |    -     |     内容样式     |
+| animation-duration |      `number`      |   2000   |   动画持续时间   |
+|       delay        |      `number`      |    0     | 延迟进行动画时间 |
+|     value-from     |      `number`      |    0     |    动画初始值    |
+|     animation      |     `boolean`      |  false   |   是否开启动画   |
+|       easing       |      `string`      | quartOut |   数字动画效果   |
+|       start        |     `boolean`      |  false   |   是否开始动画   |
 

packages/devui-vue/docs/en-US/components/statistic/index.md

@@ -44,7 +44,6 @@ Display statistics in cards.
           :value="68.28"
           :precision="3"
           suffix="%"
-          :content-style="{ color: '#3f8600' }"
         >
           <template #prefix>
             <d-icon name="experice-new" />
@@ -59,7 +58,6 @@ Display statistics in cards.
           :value="38.3"
           suffix="%"
           class="demo-class"
-          :content-style="{ color: '#cf1322' }"
         >
           <template #prefix>
             <d-icon name="bold" />
@@ -87,30 +85,28 @@ We can start numerical animation by setting the animation attribute. You can sta
           title="Animation Growth Rate"
           :value="88.265"
           suffix="%"
-          :content-style="{ color: '#3f8600' }"
           :value-from="0"
           :start="start"
           :animation-duration="5000"
           animation
-        >
-        </d-statistic>
+        ></d-statistic>
       </d-card>
     </d-col>
     <d-col :span="12">
       <d-card>
         <d-statistic
           title="Animation Decline Rate"
-          value="53.333"
-          :precision="0"
-          suffix="%"
-          class="demo-class"
-          :content-style="{ color: '#cf1322' }"
+          value="53"
+          :precision="3"
           :value-from="0"
           :start="controlStart"
           animation
         >
+          <template #suffix>
+            <span>%</span>
+            <d-button @click="controlStart = true">Start</d-button>
+          </template>
         </d-statistic>
-        <d-button @click="controlStart = true">Start</d-button>
       </d-card>
     </d-col>
   </d-row>
@@ -120,10 +116,10 @@ export default {
   data() {
     return {
       start: true,
-      controlStart: false,
-    };
-  },
-};
+      controlStart: false
+    }
+  }
+}
 </script>
 ```
 
@@ -162,6 +158,40 @@ Prefix and suffix slots
 
 :::
 
+### Custom Style
+
+Provide custom attributes to facilitate adding styles
+:::demo
+
+```vue
+<template>
+  <d-row :gutter="16">
+    <d-col :span="12">
+      <d-statistic
+        title="Custom Style"
+        :value="88"
+        :content-style="{ color: '#fba' }"
+        :title-style="{ color: '#abf' }"
+      >
+        <template #suffix>%</template>
+      </d-statistic>
+    </d-col>
+    <d-col :span="12">
+      <d-statistic
+        title="Scale"
+        :value="5000"
+        group-separator="."
+        :precision="3"
+        prefix="$"
+        :content-style="{ fontSize: '30px', color: '#5e7ce0'}"
+      >
+    </d-col>
+  </d-row>
+</template>
+```
+
+:::
+
 ### d-statistic
 
 | parameter          | type               | default  | introduce                    |