From f5471713f281ceec7f2d9f5ddf9b0c0e87be5700 Mon Sep 17 00:00:00 2001
From: wangxueliang <wangxueliang@yidian-inc.com>
Date: Tue, 28 May 2019 11:10:38 +0800
Subject: [PATCH] docs: fix statistic demo

---
 components/statistic/demo/card.md      | 52 +++++++++++++++++---------
 components/statistic/demo/countdown.md | 40 +++++++++++++-------
 components/statistic/demo/unit.md      | 43 +++++++++++----------
 components/statistic/index.en-US.md    | 14 +++----
 components/statistic/index.zh-CN.md    | 14 +++----
 5 files changed, 99 insertions(+), 64 deletions(-)

diff --git a/components/statistic/demo/card.md b/components/statistic/demo/card.md
index 80e1323ac..adfb3add1 100644
--- a/components/statistic/demo/card.md
+++ b/components/statistic/demo/card.md
@@ -10,23 +10,41 @@ Display statistic data in Card.
 
 ```html
 <template>
-  <div>
-    <a-card style="padding: 30px">
-      <a-statistic
-        title="Feedback"
-        :value="1128"
-        style="margin-right: 50px"
-      >
-        <a-icon slot="prefix" type="like" />
-      </a-statistic>
-      <a-statistic
-        title="Unmerged"
-        :value="1234567890"
-        valueClass="demo-class"
-      >
-        <span slot="suffix"> / 100</span>
-      </a-statistic>
-    </a-card>
+  <div style="background: #ECECEC; padding: 30px">
+    <a-row :gutter="16">
+      <a-col :span="12">
+        <a-card>
+          <a-statistic
+            title="Feedback"
+            :value="11.28"
+            :precision="2"
+            suffix="%"
+            :valueStyle="{color: '#3f8600'}"
+            style="margin-right: 50px"
+          >
+            <template v-slot:prefix>
+                <a-icon type="arrow-up" />
+              </template>
+          </a-statistic>
+        </a-card>
+      </a-col>
+      <a-col :span="12">
+        <a-card>
+          <a-statistic
+              title="Idle"
+              :value="9.3"
+              :precision="2"
+              suffix="%"
+              valueClass="demo-class"
+              :valueStyle="{ color: '#cf1322' }"
+            >
+              <template v-slot:prefix>
+                <a-icon type="arrow-down" />
+              </template>
+            </a-statistic>
+        </a-card>
+      </a-col>
+    </a-row>
   </div>
 </template>
 ```
diff --git a/components/statistic/demo/countdown.md b/components/statistic/demo/countdown.md
index 832a8ec95..e8466d2bc 100644
--- a/components/statistic/demo/countdown.md
+++ b/components/statistic/demo/countdown.md
@@ -10,19 +10,31 @@ Countdown component.
 
 ```html
 <template>
-  <div>
-    <a-statistic-countdown
-      title="Countdown"
-      :value="deadline"
-      @finish="onFinish"
-      style="margin-right: 50px"
-    />
-    <a-statistic-countdown
-      title="Million Seconds"
-      :value="deadline"
-      format="HH:mm:ss:SSS"
-    />
-  </div>
+  <a-row :gutter="16">
+    <a-col :span="12">
+      <a-statistic-countdown
+        title="Countdown"
+        :value="deadline"
+        @finish="onFinish"
+        style="margin-right: 50px"
+      />
+    </a-col>
+    <a-col :span="12">
+      <a-statistic-countdown
+        title="Million Seconds"
+        :value="deadline"
+        format="HH:mm:ss:SSS"
+        style="margin-right: 50px"
+      />
+    </a-col>
+    <a-col :span="24" style="margin-top: 32px;">
+      <a-statistic-countdown
+        title="Day Level"
+        :value="deadline"
+        format="D 天 H 时 m 分 s 秒"
+      />
+    </a-col>
+  </a-row>
 </template>
 <script>
 export default {
@@ -38,4 +50,4 @@ export default {
   },
 }
 </script>
-```
\ No newline at end of file
+```
diff --git a/components/statistic/demo/unit.md b/components/statistic/demo/unit.md
index 336a98086..a31fca5c1 100644
--- a/components/statistic/demo/unit.md
+++ b/components/statistic/demo/unit.md
@@ -10,24 +10,29 @@ Add unit through `prefix` and `suffix`.
 
 ```html
 <template>
-  <div>
-    <a-statistic
-      title="Feedback"
-      :value="11.28"
-      :precision="2"
-      suffix="%"
-      :valueStyle="{color: '#3f8600'}"
-      style="margin-right: 50px"
-    >
-      <a-icon slot="prefix" type="arrow-up" />
-    </a-statistic>
-    <a-statistic
-      title="Unmerged"
-      :value="78"
-      valueClass="demo-class"
-    >
-      <span slot="suffix"> / 100</span>
-    </a-statistic>
-  </div>
+  <a-row :gutter="16">
+    <a-col :span="12">
+      <a-statistic
+        title="Feedback"
+        :value="1128"
+        style="margin-right: 50px"
+      >
+        <template v-slot:suffix>
+          <a-icon type="like" />
+        </template>
+      </a-statistic>
+    </a-col>
+    <a-col :span="12">
+      <a-statistic
+        title="Unmerged"
+        :value="93"
+        valueClass="demo-class"
+      >
+        <template v-slot:suffix>
+          <span> / 100</span>
+        </template>
+      </a-statistic>
+    </a-col>
+  </a-row>
 </template>
 ```
diff --git a/components/statistic/index.en-US.md b/components/statistic/index.en-US.md
index bba20e111..e60bcb350 100644
--- a/components/statistic/index.en-US.md
+++ b/components/statistic/index.en-US.md
@@ -5,12 +5,12 @@
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | decimalSeparator | decimal separator | string | . |
-| formatter | customize value display logic | (h) => VNode | - |
+| formatter | customize value display logic | v-slot \|(h) => VNode | - |
 | groupSeparator | group separator | string | , |
 | precision | precision of input value | number | - |
-| prefix | prefix node of value | string \| VNode | - |
-| suffix | suffix node of value | string \| VNode | - |
-| title | Display title | string \| VNode | - |
+| prefix | prefix node of value | string \| v-slot | - |
+| suffix | suffix node of value | string \| v-slot | - |
+| title | Display title | string \| v-slot | - |
 | value | Display value | string \| number | - |
 
 
@@ -19,9 +19,9 @@
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | format | Format as [moment](http://momentjs.com/) | string | 'HH:mm:ss' |
-| prefix | prefix node of value | string \| VNode | - |
-| suffix | suffix node of value | string \| VNode | - |
-| title | Display title | string \| VNode | - |
+| prefix | prefix node of value | string \| v-slot | - |
+| suffix | suffix node of value | string \| v-slot | - |
+| title | Display title | string \| v-slot | - |
 | value | Set target countdown time | number \| moment | - |
 
 #### Statistic.Countdown Events
diff --git a/components/statistic/index.zh-CN.md b/components/statistic/index.zh-CN.md
index 1e5bea6af..88dde6235 100644
--- a/components/statistic/index.zh-CN.md
+++ b/components/statistic/index.zh-CN.md
@@ -5,12 +5,12 @@
 | 参数 | 说明 | 类型 | 默认值 |
 | -------- | ----------- | ---- | ------- |
 | decimalSeparator | 设置小数点 | string | . |
-| formatter | 自定义数值展示 | (h) => VNode | - |
+| formatter | 自定义数值展示 | v-slot \| (h) => VNode | - |
 | groupSeparator | 设置千分位标识符 | string | , |
 | precision | 数值精度 | number | - |
-| prefix | 设置数值的前缀 | string \| VNode | - |
-| suffix | 设置数值的后缀 | string \| VNode | - |
-| title | 数值的标题 | string \| VNode | - |
+| prefix | 设置数值的前缀 | string \| v-slot | - |
+| suffix | 设置数值的后缀 | string \| v-slot | - |
+| title | 数值的标题 | string \| v-slot | - |
 | value | 数值内容 | string \| number | - |
 
 ### Statistic.Countdown
@@ -18,9 +18,9 @@
 | 参数 | 说明 | 类型 | 默认值 |
 | -------- | ----------- | ---- | ------- |
 | format | 格式化倒计时展示，参考 [moment](http://momentjs.com/) | string | 'HH:mm:ss' |
-| prefix | 设置数值的前缀 | string \| VNode | - |
-| suffix | 设置数值的后缀 | string \| VNode | - |
-| title | 数值的标题 | string \| VNode | - |
+| prefix | 设置数值的前缀 | string \| v-slot | - |
+| suffix | 设置数值的后缀 | string \| v-slot | - |
+| title | 数值的标题 | string \| v-slot | - |
 | value | 数值内容 | number \| moment | - |
 
 #### Statistic.Countdown事件