refactor(statistic): 重构Statistic Api Demo

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

@@ -1,5 +1,5 @@
 import type { PropType, ExtractPropTypes, CSSProperties } from 'vue'
-import type { easingType } from './utils/animation'
+// import type { easingType } from './utils/animation'
 export const statisticProps = {
   title: {
     type: String,
@@ -21,14 +21,7 @@ export const statisticProps = {
     type: String,
     default: ''
   },
-  showGroupSeparator: {
-    type: Boolean,
-    default: true
-  },
-  titleStyle: {
-    type: Object as PropType<CSSProperties>
-  },
-  contentStyle: {
+  valueStyle: {
     type: Object as PropType<CSSProperties>
   },
   animationDuration: {
@@ -44,19 +37,11 @@ export const statisticProps = {
   },
   start: {
     type: Boolean,
-    default: false
+    default: true
   },
   extra: {
     type: String,
     default: ''
-  },
-  easing: {
-    type: String as PropType<easingType>,
-    default: 'easeOutCubic'
-  },
-  delay: {
-    type: Number,
-    default: 0
   }
 } as const
 

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

@@ -8,10 +8,8 @@
 
   &-title {
     margin-bottom: 4px;
-    opacity: 0.7;
     font-size: 14px;
   }
-
   &-content {
     font-size: 24px;
     display: flex;

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

@@ -24,9 +24,9 @@ export default defineComponent({
           to: {
             value: to
           },
-          delay: props.delay,
+          delay: 0,
           duration: props.animationDuration,
-          easing: props.easing,
+          easing: 'easeOutCubic',
           onUpdate: (keys: any) => {
             innerValue.value = keys.value
           },
@@ -37,22 +37,20 @@ export default defineComponent({
         tween.value.start()
       }
     }
-
     const statisticValue = computed(() => {
       return analysisValueType(
         innerValue.value,
         props.value,
         props.groupSeparator,
-        props.precision,
-        props.showGroupSeparator
+        props.precision
       )
     })
     onMounted(() => {
       if (props.animation && props.start) {
         animation()
       }
     })
-
+    // 我们可以手动控制animation
     watch(
       () => props.start,
       (value) => {
@@ -67,7 +65,7 @@ export default defineComponent({
           <div class='devui-statistic-title' style={props.titleStyle}>
             {ctx.slots.title?.() || props.title}
           </div>
-          <div class='devui-statistic-content' style={props.contentStyle}>
+          <div class='devui-statistic-content' style={props.valueStyle}>
             {props.prefix || ctx.slots.prefix?.() ? (
               <span class='devui-statistic-prefix'>{ctx.slots.prefix?.() || props.prefix}</span>
             ) : null}
@@ -76,7 +74,9 @@ export default defineComponent({
               <span class='devui-statistic-suffix'>{ctx.slots.suffix?.() || props.suffix}</span>
             ) : null}
           </div>
-          {ctx.slots.extra?.() || props.extra}
+          {props.extra || ctx.slots.extra?.() ? (
+            <div class='devui-statistic-extra'> {ctx.slots.extra?.() || props.extra}</div>
+          ) : null}
         </div>
       )
     }

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

@@ -112,7 +112,6 @@ export class Tween {
     const tick = () => {
       this.update()
       this.timer = requestAnimationFrame(tick)
-
       if (this.finished) {
         // 在判断 update中 结束后 停止 重绘
         cancelAnimationFrame(this.timer)

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

@@ -3,12 +3,11 @@ export type valueType = string | number
 export const separator = (
   SeparatorString: string, // value
   groupSeparator: string, // 千分位分隔符
-  showGroupSeparator: boolean // 是否展示千分位分隔符
 ): string => {
   const res = SeparatorString.replace(/\d+/, function (n) {
     // 先提取整数部分
     return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) {
-      return $1 + `${showGroupSeparator ? groupSeparator : ''}`
+      return $1 + `${groupSeparator}`
     })
   })
   return res
@@ -23,8 +22,7 @@ export const analysisValueType = (
   value: valueType, // 动态value 值
   propsValue: valueType, // 用户传入value
   groupSeparator: string, // 千位分隔符
-  splitPrecisionNumber: number, // 分割精度, 小数点
-  showGroupSeparator: boolean // 是否展示千分位分隔符
+  splitPrecisionNumber: number // 分割精度, 小数点
 ): string => {
   const fixedNumber =
     propsValue.toString().indexOf('.') !== -1
@@ -33,20 +31,12 @@ export const analysisValueType = (
   if (typeof value === 'number') {
     if (isHasDot(value)) {
       return splitPrecisionNumber
-        ? separator(
-            value.toFixed(splitPrecisionNumber).toString(),
-            groupSeparator,
-            showGroupSeparator
-          )
-        : separator(value.toFixed(fixedNumber).toString(), groupSeparator, showGroupSeparator)
+        ? separator(value.toFixed(splitPrecisionNumber).toString(), groupSeparator)
+        : separator(value.toFixed(fixedNumber).toString(), groupSeparator)
     } else {
       return splitPrecisionNumber
-        ? separator(
-            value.toFixed(splitPrecisionNumber).toString(),
-            groupSeparator,
-            showGroupSeparator
-          )
-        : separator(value.toString(), groupSeparator, showGroupSeparator)
+        ? separator(value.toFixed(splitPrecisionNumber).toString(), groupSeparator)
+        : separator(value.toString(), groupSeparator)
     }
   } else {
     return value

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

@@ -15,52 +15,22 @@
       <d-statistic
         title="Users Sales"
         group-separator=","
-        :value="5201314" />
+        :value="5201314">
+      </d-statistic>
     </d-col>
     <d-col :span="12">
       <d-statistic
         title="Account Weekly Sales (CNY)"
         group-separator="."
-        :value="999999" />
+        :value="999999">
+      </d-statistic>
     </d-col>
   </d-cow>
 </template>
 ```
 
 :::
 
-### 在卡片中使用
-
-在卡片中展示统计数值。
-:::demo
-
-```vue
-<template>
-  <d-row :gutter="16">
-    <d-col :span="12">
-      <d-card>
-        <d-statistic title="Growth Rate" :value="68.28" :precision="3" suffix="%">
-          <template #prefix>
-            <d-icon name="experice-new" />
-          </template>
-        </d-statistic>
-      </d-card>
-    </d-col>
-    <d-col :span="12">
-      <d-card>
-        <d-statistic title="Decline Rate" :value="38.3" suffix="%">
-          <template #prefix>
-            <d-icon name="bold" />
-          </template>
-        </d-statistic>
-      </d-card>
-    </d-col>
-  </d-row>
-</template>
-```
-
-:::
-
 ### 数值动画
 
 我们可以通过设置 animation 属性 开启数值动画。可以在页面加载时开始动画,也可以手动控制
@@ -117,26 +87,61 @@ export default {
 
 ### 插槽的使用
 
-前缀和后缀插槽
+前缀插槽， 后缀插槽， 额外插槽
 :::demo
 
 ```vue
 <template>
   <d-row :gutter="16">
     <d-col :span="12">
       <d-statistic
-        title="Active User Number"
-        :value="1128"
-        :showGroupSeparator="true"
+        :value="336969"
         style="margin-right: 50px"
+        group-separator=","
+        :value-style="{ fontWeight: 'bold', fontSize: '30px' }"
+        animation
       >
-        <template #suffix>%</template>
+        <template #title>
+          <span :style="{marginRight: '10px' }">文章阅读数</span>
+          <d-icon name="help" />
+        </template>
+        <template #extra>
+          <span :style="{ fontSize: '13px', marginRight: '10px' }">较前日</span>
+          <d-icon color="#F56C6C" name="arrow-down" />
+          <d-statistic
+            style="display: inline-block;"
+            group-separator=","
+            :value-style="{ fontSize: '15px', color: '#F56C6C', letterSpacing: '2px' }"
+            value="1399"
+            animation
+          />
+        </template>
       </d-statistic>
     </d-col>
     <d-col :span="12">
-      <d-statistic title="Scale" value="93">
-        <template #suffix>
-          <span>/ 100</span>
+      <d-statistic
+        :value="5565566"
+        style="margin-right: 50px"
+        group-separator=","
+        :value-style="{ fontWeight: 'bold', fontSize: '30px' }"
+        animation
+        :animation-duration="5000"
+      >
+        <template #title>
+          <span :style="{marginRight: '10px' }">文章点赞数</span>
+          <d-icon name="help" />
+        </template>
+        <template #extra>
+          <span :style="{ fontSize: '13px', marginRight: '10px' }">较前日</span>
+          <d-icon color="#67C23A" name="arrow-up" />
+          <d-statistic
+            style="display: inline-block;"
+            :value-style="{ fontSize: '15px', color: '#67C23A', letterSpacing: '2px' }"
+            value="6669"
+            animation
+            group-separator=","
+            :animation-duration="5000"
+          />
         </template>
       </d-statistic>
     </d-col>
@@ -146,33 +151,37 @@ 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-card>
+        <d-statistic
+          :value-style="{ color: '#fba' }"
+          title="Growth Rate"
+          :value="68.28"
+          :precision="3"
+          suffix="%"
+        >
+          <template #prefix>
+            <d-icon name="experice-new" />
+          </template>
+        </d-statistic>
+      </d-card>
     </d-col>
     <d-col :span="12">
-      <d-statistic
-        title="Scale"
-        :value="5000"
-        group-separator="."
-        :precision="3"
-        prefix="$"
-        :content-style="{ fontSize: '30px', color: '#5e7ce0'}"
-      >
+      <d-card>
+        <d-statistic :value-style="{ color: '#abf' }" title="Decline Rate" :value="38.3" suffix="%">
+          <template #prefix>
+            <d-icon name="bold" />
+          </template>
+        </d-statistic>
+      </d-card>
     </d-col>
   </d-row>
 </template>
@@ -185,18 +194,14 @@ export default {
 |        参数        |        类型        |   默认   |       说明       |
 | :----------------: | :----------------: | :------: | :--------------: |
 |       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`       |    -     |     内容样式     |
+|       extra        | `string \| v-slot` |    -     |     额外内容     |
+|    value-style     |      `style`       |    -     |     内容样式     |
 | animation-duration |      `number`      |   2000   |   动画持续时间   |
-|       delay        |      `number`      |    0     | 延迟进行动画时间 |
 |     value-from     |      `number`      |    0     |    动画初始值    |
 |     animation      |     `boolean`      |  false   |   是否开启动画   |
-|       easing       |      `string`      | quartOut |   数字动画效果   |
-|       start        |     `boolean`      |  false   |   是否开始动画   |
-
+|       start        |     `boolean`      |  true   |   是否开始动画   |