@opentiny/vue-docs 2.2.19 → 2.2.21

package/demos/pc/app/skeleton/custom-layout-composition-api.vue

@@ -1,10 +1,16 @@
 <template>
   <div>
+    <div class="m-20">style 类型</div>
     <tiny-skeleton>
       <template #placeholder>
-        <tiny-skeleton-item variant="image" style="width: 200px"></tiny-skeleton-item>
-        <br /><br />
-        <tiny-skeleton-item variant="circle" size="small"></tiny-skeleton-item>
+        <tiny-skeleton-item style="width: 200px; height: 100px"></tiny-skeleton-item>
+      </template>
+    </tiny-skeleton>
+
+    <div class="m-20">class 类型</div>
+    <tiny-skeleton>
+      <template #placeholder>
+        <tiny-skeleton-item class="tiny-skeleton-class"></tiny-skeleton-item>
       </template>
     </tiny-skeleton>
   </div>
@@ -13,3 +19,13 @@
 <script setup>
 import { Skeleton as TinySkeleton, SkeletonItem as TinySkeletonItem } from '@opentiny/vue'
 </script>
+
+<style scoped>
+.tiny-skeleton-class {
+  width: 200px;
+  height: 100px;
+}
+.m-20 {
+  margin: 20px 0;
+}
+</style>

package/demos/pc/app/skeleton/custom-layout.spec.ts

@@ -1,14 +1,11 @@
 import { expect, test } from '@playwright/test'
 
-test('自定义排版', async ({ page }) => {
+test('样式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('skeleton#custom-layout')
 
-  const image = page.locator('.tiny-skeleton-item--image')
-  const circle = page.locator('.tiny-skeleton-item--circle')
+  const image = page.locator('.tiny-skeleton-item')
 
-  await expect(image).toHaveCount(1)
-  await expect(circle).toHaveCount(1)
-  await expect(circle).toHaveClass(/tiny-skeleton-item--small/)
-  await expect(image).toHaveCSS('width', '200px')
+  await expect(image.nth(0)).toHaveCSS('width', '200px')
+  await expect(image.nth(1)).toHaveCSS('height', '100px')
 })

package/demos/pc/app/skeleton/custom-layout.vue

@@ -1,10 +1,16 @@
 <template>
   <div>
+    <div class="m-20">style 类型</div>
     <tiny-skeleton>
       <template #placeholder>
-        <tiny-skeleton-item variant="image" style="width: 200px"></tiny-skeleton-item>
-        <br /><br />
-        <tiny-skeleton-item variant="circle" size="small"></tiny-skeleton-item>
+        <tiny-skeleton-item style="width: 200px; height: 100px"></tiny-skeleton-item>
+      </template>
+    </tiny-skeleton>
+
+    <div class="m-20">class 类型</div>
+    <tiny-skeleton>
+      <template #placeholder>
+        <tiny-skeleton-item class="tiny-skeleton-class"></tiny-skeleton-item>
       </template>
     </tiny-skeleton>
   </div>
@@ -20,3 +26,13 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-skeleton-class {
+  width: 200px;
+  height: 100px;
+}
+.m-20 {
+  margin: 20px 0;
+}
+</style>

package/demos/pc/app/skeleton/custom-paragraph-width-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-skeleton :rows="5" :rows-width="['200px', '100px', '50px']"></tiny-skeleton>
+    <tiny-skeleton :rows-width="['200px', '100px', '50px']"></tiny-skeleton>
   </div>
 </template>
 

package/demos/pc/app/skeleton/custom-paragraph-width.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test'
 
-test('自定义段落宽度', async ({ page }) => {
+test('段落宽度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('skeleton#custom-paragraph-width')
 

package/demos/pc/app/skeleton/custom-paragraph-width.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-skeleton :rows="5" :rows-width="['200px', '100px', '50px']"></tiny-skeleton>
+    <tiny-skeleton :rows-width="['200px', '100px', '50px']"></tiny-skeleton>
   </div>
 </template>
 

package/demos/pc/app/skeleton/custom-rows.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test'
 
-test('自定义段落行数', async ({ page }) => {
+test('段落行数', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('skeleton#custom-rows')
 

package/demos/pc/app/skeleton/fine-grained-mode-composition-api.vue

@@ -1,34 +1,17 @@
 <template>
   <div>
-    <p>大小</p>
-    <tiny-radio v-model="size" label="small">Small</tiny-radio>
-    <tiny-radio v-model="size" label="medium">Middle</tiny-radio>
-    <tiny-radio v-model="size" label="large">Large</tiny-radio>
-    <br /><br />
-    <p>动画</p>
-    <tiny-switch v-model="active"></tiny-switch>
-    <br /><br />
-    <tiny-skeleton :active="active">
+    <tiny-skeleton>
       <template #placeholder>
-        <tiny-skeleton-item></tiny-skeleton-item>
+        <tiny-skeleton-item variant="square"></tiny-skeleton-item>
         <br />
-        <tiny-skeleton-item variant="image" :size="size"></tiny-skeleton-item>
+        <tiny-skeleton-item variant="image"></tiny-skeleton-item>
         <br /><br />
-        <tiny-skeleton-item variant="circle" :size="size"></tiny-skeleton-item>
+        <tiny-skeleton-item variant="circle"></tiny-skeleton-item>
       </template>
     </tiny-skeleton>
   </div>
 </template>
 
 <script setup>
-import {
-  Skeleton as TinySkeleton,
-  Radio as TinyRadio,
-  SkeletonItem as TinySkeletonItem,
-  Switch as TinySwitch
-} from '@opentiny/vue'
-import { ref } from 'vue'
-
-const size = ref('medium')
-const active = ref(true)
+import { Skeleton as TinySkeleton, SkeletonItem as TinySkeletonItem } from '@opentiny/vue'
 </script>

package/demos/pc/app/skeleton/fine-grained-mode.spec.ts

@@ -1,50 +1,14 @@
 import { expect, test } from '@playwright/test'
 
-test('细粒度模式', async ({ page }) => {
+test('形态', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('skeleton#fine-grained-mode')
 
-  const first = page.locator('.tiny-skeleton')
-  const radio1 = page.locator('.tiny-radio').nth(0)
-  const radio2 = page.locator('.tiny-radio').nth(1)
-  const radio3 = page.locator('.tiny-radio').nth(2)
-  const activeSwitch = page.locator('.pc-demo > div > .tiny-switch')
   const image = page.locator('.tiny-skeleton-item--image')
   const circle = page.locator('.tiny-skeleton-item--circle')
   const square = page.locator('.tiny-skeleton-item--square')
 
-  await expect(first).toHaveCount(1)
-
-  // 测试动画效果
-  await expect(circle).toHaveClass(/tiny-skeleton-item--active/)
-  await expect(square).toHaveClass(/tiny-skeleton-item--active/)
-  await expect(image).toHaveClass(/tiny-skeleton-item--active/)
-
-  await activeSwitch.click()
-  await page.waitForTimeout(500)
-  await expect(image).not.toHaveClass(/tiny-skeleton-item--active/)
-  await expect(circle).not.toHaveClass(/tiny-skeleton-item--active/)
-  await expect(square).not.toHaveClass(/tiny-skeleton-item--active/)
-
-  // 测试大小
-  await radio2.click()
-  await page.waitForTimeout(500)
-  await expect(radio2).toHaveClass(/is-checked/)
-  await expect(circle).toHaveClass(/tiny-skeleton-item--medium/)
-  await expect(image).toHaveClass(/tiny-skeleton-item--medium/)
-  await expect(square).not.toHaveClass(/tiny-skeleton-item--medium/)
-
-  await radio1.click()
-  await page.waitForTimeout(500)
-  await expect(radio1).toHaveClass(/is-checked/)
-  await expect(circle).toHaveClass(/tiny-skeleton-item--small/)
-  await expect(image).toHaveClass(/tiny-skeleton-item--small/)
-  await expect(square).not.toHaveClass(/tiny-skeleton-item--small/)
-
-  await radio3.click()
-  await page.waitForTimeout(500)
-  await expect(radio3).toHaveClass(/is-checked/)
-  await expect(circle).toHaveClass(/tiny-skeleton-item--large/)
-  await expect(image).toHaveClass(/tiny-skeleton-item--large/)
-  await expect(square).not.toHaveClass(/tiny-skeleton-item--large/)
+  await expect(image).toBeVisible()
+  await expect(circle).toBeVisible()
+  await expect(square).toBeVisible()
 })

package/demos/pc/app/skeleton/fine-grained-mode.vue

@@ -1,41 +1,24 @@
 <template>
   <div>
-    <p>大小</p>
-    <tiny-radio v-model="size" label="small">Small</tiny-radio>
-    <tiny-radio v-model="size" label="medium">Middle</tiny-radio>
-    <tiny-radio v-model="size" label="large">Large</tiny-radio>
-    <br /><br />
-
-    <p>动画</p>
-    <tiny-switch v-model="active"></tiny-switch>
-    <br /><br />
-    <tiny-skeleton :active="active">
+    <tiny-skeleton>
       <template #placeholder>
-        <tiny-skeleton-item></tiny-skeleton-item>
+        <tiny-skeleton-item variant="square"></tiny-skeleton-item>
         <br />
-        <tiny-skeleton-item variant="image" :size="size"></tiny-skeleton-item>
+        <tiny-skeleton-item variant="image"></tiny-skeleton-item>
         <br /><br />
-        <tiny-skeleton-item variant="circle" :size="size"></tiny-skeleton-item>
+        <tiny-skeleton-item variant="circle"></tiny-skeleton-item>
       </template>
     </tiny-skeleton>
   </div>
 </template>
 
 <script>
-import { Skeleton, Radio, SkeletonItem, Switch } from '@opentiny/vue'
+import { Skeleton, SkeletonItem } from '@opentiny/vue'
 
 export default {
   components: {
     TinySkeleton: Skeleton,
-    TinyRadio: Radio,
-    TinySkeletonItem: SkeletonItem,
-    TinySwitch: Switch
-  },
-  data() {
-    return {
-      size: 'medium',
-      active: true
-    }
+    TinySkeletonItem: SkeletonItem
   }
 }
 </script>

package/demos/pc/app/skeleton/loading-completed-composition-api.vue

@@ -1,30 +1,20 @@
 <template>
   <div>
-    <tiny-button @click="handler">显示/隐藏</tiny-button>
+    <tiny-button @click="handler">{{ loading ? '显示' : '隐藏' }}</tiny-button>
     <br /><br />
     <tiny-skeleton :loading="loading">
       <template #default>
-        <tiny-user-head type="icon" round></tiny-user-head>
         <p class="paragraph">内容比较短的一段文字</p>
-        <tiny-button>一个按钮</tiny-button>
       </template>
       <template #placeholder>
-        <tiny-skeleton-item variant="circle" style="width: 72px; height: 72px"></tiny-skeleton-item>
-        <br /><br />
-        <tiny-skeleton-item style="width: 180px"></tiny-skeleton-item>
-        <tiny-skeleton-item style="width: 92px; height: 28px"></tiny-skeleton-item>
+        <tiny-skeleton-item></tiny-skeleton-item>
       </template>
     </tiny-skeleton>
   </div>
 </template>
 
 <script setup>
-import {
-  Skeleton as TinySkeleton,
-  Button as TinyButton,
-  SkeletonItem as TinySkeletonItem,
-  UserHead as TinyUserHead
-} from '@opentiny/vue'
+import { Skeleton as TinySkeleton, Button as TinyButton, SkeletonItem as TinySkeletonItem } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const loading = ref(true)

package/demos/pc/app/skeleton/loading-completed.spec.ts

@@ -5,22 +5,11 @@ test('加载完成', async ({ page }) => {
   await page.goto('skeleton#loading-completed')
 
   const square = page.locator('.tiny-skeleton-item--square')
-  const circle = page.locator('.tiny-skeleton-item--circle')
-  const button = page.getByRole('button', { name: '显示/隐藏' })
-
-  await expect(circle).toHaveCount(1)
-  await expect(square).toHaveCount(2)
-  await expect(circle).toHaveCSS('width', '72px')
-  await expect(circle).toHaveCSS('height', '72px')
+  const button = page.locator('.tiny-button')
 
   await button.click()
   await page.waitForTimeout(500)
   await expect(square).toBeHidden()
-  await expect(circle).toBeHidden()
   const p = page.locator('.paragraph')
   await expect(p).toHaveText(/内容比较短的一段文字/)
-  const btn = page.getByRole('button', { name: '一个按钮' })
-  await expect(btn).toBeVisible()
-  const head = page.locator('.tiny-user-head')
-  await expect(head).toBeVisible()
 })

package/demos/pc/app/skeleton/loading-completed.vue

@@ -1,32 +1,26 @@
 <template>
   <div>
-    <tiny-button @click="handler">显示/隐藏</tiny-button>
+    <tiny-button @click="handler">{{ loading ? '显示' : '隐藏' }}</tiny-button>
     <br /><br />
     <tiny-skeleton :loading="loading">
       <template #default>
-        <tiny-user-head type="icon" round></tiny-user-head>
         <p class="paragraph">内容比较短的一段文字</p>
-        <tiny-button>一个按钮</tiny-button>
       </template>
       <template #placeholder>
-        <tiny-skeleton-item variant="circle" style="width: 72px; height: 72px"></tiny-skeleton-item>
-        <br /><br />
-        <tiny-skeleton-item style="width: 180px"></tiny-skeleton-item>
-        <tiny-skeleton-item style="width: 92px; height: 28px"></tiny-skeleton-item>
+        <tiny-skeleton-item></tiny-skeleton-item>
       </template>
     </tiny-skeleton>
   </div>
 </template>
 
 <script>
-import { Skeleton, Button, SkeletonItem, UserHead } from '@opentiny/vue'
+import { Skeleton, Button, SkeletonItem } from '@opentiny/vue'
 
 export default {
   components: {
     TinySkeleton: Skeleton,
     TinyButton: Button,
-    TinySkeletonItem: SkeletonItem,
-    TinyUserHead: UserHead
+    TinySkeletonItem: SkeletonItem
   },
   data() {
     return {

package/demos/pc/app/skeleton/size-composition-api.vue

@@ -0,0 +1,16 @@
+<template>
+  <tiny-skeleton>
+    <template #placeholder>
+      <br /><br />
+      <tiny-skeleton-item variant="image" size="small"></tiny-skeleton-item>
+      <br /><br />
+      <tiny-skeleton-item variant="image" size="medium"></tiny-skeleton-item>
+      <br /><br />
+      <tiny-skeleton-item variant="image" size="large"></tiny-skeleton-item>
+    </template>
+  </tiny-skeleton>
+</template>
+
+<script setup>
+import { Skeleton as TinySkeleton, SkeletonItem as TinySkeletonItem } from '@opentiny/vue'
+</script>

package/demos/pc/app/skeleton/size.spec.ts

@@ -0,0 +1,14 @@
+import { expect, test } from '@playwright/test'
+
+test('尺寸', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('skeleton#size')
+
+  const small = page.locator('.tiny-skeleton-item--small')
+  const medium = page.locator('.tiny-skeleton-item--medium')
+  const large = page.locator('.tiny-skeleton-item--large')
+
+  await expect(small).toBeVisible()
+  await expect(medium).toBeVisible()
+  await expect(large).toBeVisible()
+})

package/demos/pc/app/skeleton/size.vue

@@ -0,0 +1,23 @@
+<template>
+  <tiny-skeleton>
+    <template #placeholder>
+      <br /><br />
+      <tiny-skeleton-item variant="image" size="small"></tiny-skeleton-item>
+      <br /><br />
+      <tiny-skeleton-item variant="image" size="medium"></tiny-skeleton-item>
+      <br /><br />
+      <tiny-skeleton-item variant="image" size="large"></tiny-skeleton-item>
+    </template>
+  </tiny-skeleton>
+</template>
+
+<script>
+import { Skeleton, SkeletonItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySkeleton: Skeleton,
+    TinySkeletonItem: SkeletonItem
+  }
+}
+</script>

package/demos/pc/app/skeleton/webdoc/skeleton.js

@@ -14,23 +14,35 @@ export default {
       },
       codeFiles: ['base.vue']
     },
+    {
+      demoId: 'size',
+      name: {
+        'zh-CN': '尺寸',
+        'en-US': 'size'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>size</code>  属性可以控制骨架屏的尺寸。</p>\n',
+        'en-US': '<p>The <code>size</code> property allows you to control the size of the skeleton screen.</p>\n'
+      },
+      codeFiles: ['size.vue']
+    },
     {
       demoId: 'complex-demo',
       name: {
-        'zh-CN': '复杂的组合',
-        'en-US': 'Complex Demo'
+        'zh-CN': '头像模式',
+        'en-US': 'Portrait Mode'
       },
       desc: {
-        'zh-CN': '<p>更复杂的组合，通过 <code>avatar</code> 属性控制骨架段落左侧出现头像占位。</p>\n',
+        'zh-CN': '<p>通过 <code>avatar</code> 属性控制骨架段落左侧出现头像占位。</p>\n',
         'en-US':
-          '<p>More complex combinations, use the <code>avatar</code> attribute to control the appearance of the avatar placeholder on the left side of the skeleton paragraph.</p>\n'
+          '<p> Use the <code>avatar</code> attribute to control the display of the avatar on the left of the skeleton paragraph.</p>\n'
       },
       codeFiles: ['complex-demo.vue']
     },
     {
       demoId: 'custom-rows',
       name: {
-        'zh-CN': '自定义段落行数',
+        'zh-CN': '段落行数',
         'en-US': 'Custom rows'
       },
       desc: {
@@ -41,15 +53,27 @@ export default {
       },
       codeFiles: ['custom-rows.vue']
     },
+    {
+      demoId: 'custom-paragraph-width',
+      name: {
+        'zh-CN': '段落宽度',
+        'en-US': 'Custom paragraph width'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>rows-width</code> 属性可以段落宽度。</p>\n',
+        'en-US':
+          '<p>The <code>rows-width</code> attribute can customize the paragraph width. Each item in the array can be <code>number</code> or <code>string</code>. When it is <code>number< /code>, the component will automatically increase the <code>px</code> unit</p>\n'
+      },
+      codeFiles: ['custom-paragraph-width.vue']
+    },
     {
       demoId: 'custom-layout',
       name: {
-        'zh-CN': '自定义排版',
+        'zh-CN': '样式',
         'en-US': 'Custom layout'
       },
       desc: {
-        'zh-CN':
-          '<p>当默认排版不满足需求时，可自定义排版结构，通过 <code>class</code> 和 <code>style</code> 可自定义宽高等样式。</p>\n',
+        'zh-CN': '<p>通过 <code>class</code> 和 <code>style</code> 可自定义样式结构。</p>\n',
         'en-US':
           '<p>When the default layout does not meet the needs, the layout structure can be customized, and styles such as width and height can be customized through <code>class</code> and <code>style</code>.</p>\n'
       },
@@ -70,30 +94,27 @@ export default {
       codeFiles: ['loading-completed.vue']
     },
     {
-      demoId: 'custom-paragraph-width',
+      demoId: 'animation',
       name: {
-        'zh-CN': '自定义段落宽度',
-        'en-US': 'Custom paragraph width'
+        'zh-CN': '动画效果',
+        'en-US': 'Animation Effect'
       },
       desc: {
-        'zh-CN':
-          '<p><code>rows-width</code> 属性可以自定义段落宽度，数组中的每一项可以为 <code>number</code> 或 <code>string</code>，当为 <code>number</code> 时，组件会自动增加 <code>px</code> 单位。</p>\n',
-        'en-US':
-          '<p>The <code>rows-width</code> attribute can customize the paragraph width. Each item in the array can be <code>number</code> or <code>string</code>. When it is <code>number< /code>, the component will automatically increase the <code>px</code> unit</p>\n'
+        'zh-CN': '<p>通过 <code>animated</code> 属性设置是否开启动画。</p>\n',
+        'en-US': '<p>Use the <code>animated</code> attribute to set whether to enable animation.</p>\n'
       },
-      codeFiles: ['custom-paragraph-width.vue']
+      codeFiles: ['animation.vue']
     },
     {
       demoId: 'fine-grained-mode',
       name: {
-        'zh-CN': '细粒度模式',
-        'en-US': 'Fine-grained mode'
+        'zh-CN': '形态',
+        'en-US': 'formative'
       },
       desc: {
-        'zh-CN':
-          '<p>细粒度模式，<code>variant</code> 属性可以控制 <code>skeleton-item</code> 的形态，可选值：image / circle / square。<code>size</code> 属性可以控制 <code>skeleton-item</code> 的大小，可选值：medium / small / large。</p>\n',
+        'zh-CN': '<p>通过 <code>variant</code> 属性可以控制 <code>skeleton-item</code> 的形态。</p>\n',
         'en-US':
-          '<p>Fine-grained mode, the <code>variant</code> attribute can control the shape of <code>skeleton-item</code>, optional values: image / circle / square. The <code>size</code> attribute can control the size of <code>skeleton-item</code>. Optional values: medium / small / large.</p>\n'
+          '<p>The <code>variant</code> attribute can be used to control the shape of the <code>skeleton-item</code>.</p>\n'
       },
       codeFiles: ['fine-grained-mode.vue']
     }

package/demos/pc/app/statistic/basic-usage-composition-api.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <tiny-layout>
+      <tiny-row :flex="true" class="row-bg">
+        <tiny-col :span="3">
+          <tiny-statistic :value="num" :precision="0" title="用户活跃度"></tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="3">
+          <tiny-statistic :value="num" :precision="2" title="消费额度"></tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="3">
+          <tiny-statistic :value="num" :precision="0" title="来访数量" prefix="view:"></tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="3">
+          <tiny-statistic :value="123" :precision="0" title="男女占比例" suffix="/100"></tiny-statistic>
+        </tiny-col>
+      </tiny-row>
+    </tiny-layout>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { Statistic as TinyStatistic, Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
+
+const num = 306526.23
+</script>

package/demos/pc/app/statistic/basic-usage.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('statistic#basic-usage')
+  await page
+    .locator('div')
+    .filter({ hasText: /123\/100$/ })
+    .first()
+    .click()
+  await page
+    .locator('div')
+    .filter({ hasText: /^基本用法$/ })
+    .first()
+    .click()
+  await page
+    .locator('div')
+    .filter({ hasText: /^306,526\.23$/ })
+    .click()
+})

package/demos/pc/app/statistic/basic-usage.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <tiny-layout>
+      <tiny-row :flex="true" class="row-bg">
+        <tiny-col :span="3">
+          <tiny-statistic :value="num" :precision="0" title="用户活跃度"></tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="3">
+          <tiny-statistic :value="num" :precision="2" title="消费额度"></tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="3">
+          <tiny-statistic :value="num" :precision="0" title="来访数量" prefix="view:"></tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="3">
+          <tiny-statistic :value="123" :precision="0" title="男女占比例" suffix="/100"></tiny-statistic>
+        </tiny-col>
+      </tiny-row>
+    </tiny-layout>
+  </div>
+</template>
+
+<script>
+import { Statistic, Layout, Row, Col } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyStatistic: Statistic,
+    TinyLayout: Layout,
+    TinyRow: Row,
+    TinyCol: Col
+  },
+  data() {
+    return {
+      num: 306526.23
+    }
+  }
+}
+</script>