@opentiny/vue-docs 2.2.22 → 3.16.0

package/demos/pc/app/select/slot-default-composition-api.vue

@@ -35,11 +35,11 @@ import { ref } from 'vue'
 import { Select as TinySelect, Option as TinyOption, Tag as TinyTag, Tooltip as TinyTooltip } from '@opentiny/vue'
 
 const options1 = ref([
-  { value: '选项1', label: '黄金糕', tag: 'New', tip: '自定义提示' },
-  { value: '选项2', label: '双皮奶' },
-  { value: '选项3', label: '蚵仔煎' },
-  { value: '选项4', label: '龙须面' },
-  { value: '选项5', label: '北京烤鸭' }
+  { value: '选项1', label: '北京', tag: 'New', tip: '自定义提示' },
+  { value: '选项2', label: '上海' },
+  { value: '选项3', label: '天津' },
+  { value: '选项4', label: '重庆' },
+  { value: '选项5', label: '深圳' }
 ])
 
 const options2 = ref([

package/demos/pc/app/select/slot-default.spec.ts

@@ -11,8 +11,8 @@ test('选项插槽', async ({ page }) => {
   const option = dropdown.locator('.tiny-option')
 
   await input.click()
-  await expect(option.filter({ hasText: '黄金糕' })).toBeVisible()
-  await expect(option.filter({ hasText: '黄金糕' }).locator('.tiny-tag')).toHaveText('New')
-  await option.filter({ hasText: '黄金糕' }).hover()
+  await expect(option.filter({ hasText: '北京' })).toBeVisible()
+  await expect(option.filter({ hasText: '北京' }).locator('.tiny-tag')).toHaveText('New')
+  await option.filter({ hasText: '北京' }).hover()
   await expect(page.locator('body > .tiny-tooltip').filter({ hasText: '自定义提示' })).toBeVisible()
 })

package/demos/pc/app/select/slot-default.vue

@@ -43,11 +43,11 @@ export default {
   data() {
     return {
       options1: [
-        { value: '选项1', label: '黄金糕', tag: 'New', tip: '自定义提示' },
-        { value: '选项2', label: '双皮奶' },
-        { value: '选项3', label: '蚵仔煎' },
-        { value: '选项4', label: '龙须面' },
-        { value: '选项5', label: '北京烤鸭' }
+        { value: '选项1', label: '北京', tag: 'New', tip: '自定义提示' },
+        { value: '选项2', label: '上海' },
+        { value: '选项3', label: '天津' },
+        { value: '选项4', label: '重庆' },
+        { value: '选项5', label: '深圳' }
       ],
       options2: [
         { value: '选项1', label: '子网1 （192.168.0.1/24）', desc: '可用 IP 数 250' },

package/demos/pc/app/select/slot-footer-composition-api.vue

@@ -14,11 +14,11 @@ import { ref } from 'vue'
 import { Select as TinySelect, Option as TinyOption, Button as TinyButton } from '@opentiny/vue'
 
 const options = ref([
-  { value: '选项1', label: '黄金糕' },
-  { value: '选项2', label: '双皮奶' },
-  { value: '选项3', label: '蚵仔煎' },
-  { value: '选项4', label: '龙须面' },
-  { value: '选项5', label: '北京烤鸭' }
+  { value: '选项1', label: '北京' },
+  { value: '选项2', label: '上海' },
+  { value: '选项3', label: '天津' },
+  { value: '选项4', label: '重庆' },
+  { value: '选项5', label: '深圳' }
 ])
 const value = ref('')
 </script>

package/demos/pc/app/select/slot-footer.vue

@@ -21,11 +21,11 @@ export default {
   data() {
     return {
       options: [
-        { value: '选项1', label: '黄金糕' },
-        { value: '选项2', label: '双皮奶' },
-        { value: '选项3', label: '蚵仔煎' },
-        { value: '选项4', label: '龙须面' },
-        { value: '选项5', label: '北京烤鸭' }
+        { value: '选项1', label: '北京' },
+        { value: '选项2', label: '上海' },
+        { value: '选项3', label: '天津' },
+        { value: '选项4', label: '重庆' },
+        { value: '选项5', label: '深圳' }
       ],
       value: ''
     }

package/demos/pc/app/select/slot-label-composition-api.vue

@@ -26,27 +26,27 @@ import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
 const options = ref([
   {
     value: '选项1',
-    label: '黄金糕超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长',
+    label: '北京超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长',
     src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`
   },
   {
     value: '选项2',
-    label: '双皮奶',
+    label: '上海',
     src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`
   },
   {
     value: '选项3',
-    label: '蚵仔煎',
+    label: '天津',
     src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/2.jpg`
   },
   {
     value: '选项4',
-    label: '龙须面',
+    label: '重庆',
     src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/3.jpg`
   },
   {
     value: '选项5',
-    label: '北京烤鸭',
+    label: '深圳',
     src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/4.jpg`
   }
 ])

package/demos/pc/app/select/slot-label.vue

@@ -31,27 +31,27 @@ export default {
       options: [
         {
           value: '选项1',
-          label: '黄金糕超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长',
+          label: '北京超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长',
           src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`
         },
         {
           value: '选项2',
-          label: '双皮奶',
+          label: '上海',
           src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`
         },
         {
           value: '选项3',
-          label: '蚵仔煎',
+          label: '天津',
           src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/2.jpg`
         },
         {
           value: '选项4',
-          label: '龙须面',
+          label: '重庆',
           src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/3.jpg`
         },
         {
           value: '选项5',
-          label: '北京烤鸭',
+          label: '深圳',
           src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/4.jpg`
         }
       ],

package/demos/pc/app/select/slot-prefix-composition-api.vue

@@ -13,11 +13,11 @@ import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
 import { iconShare } from '@opentiny/vue-icon'
 
 const options = ref([
-  { value: '选项1', label: '黄金糕' },
-  { value: '选项2', label: '双皮奶' },
-  { value: '选项3', label: '蚵仔煎' },
-  { value: '选项4', label: '龙须面' },
-  { value: '选项5', label: '北京烤鸭' }
+  { value: '选项1', label: '北京' },
+  { value: '选项2', label: '上海' },
+  { value: '选项3', label: '天津' },
+  { value: '选项4', label: '重庆' },
+  { value: '选项5', label: '深圳' }
 ])
 const value = ref('')
 

package/demos/pc/app/select/slot-prefix.spec.ts

@@ -13,6 +13,6 @@ test('输入框前缀插槽', async ({ page }) => {
 
   await expect(prefix).toBeVisible()
   await select.click()
-  await option.filter({ hasText: '黄金糕' }).click()
-  await expect(tag.filter({ hasText: '黄金糕' })).toBeVisible()
+  await option.filter({ hasText: '北京' }).click()
+  await expect(tag.filter({ hasText: '北京' })).toBeVisible()
 })

package/demos/pc/app/select/slot-prefix.vue

@@ -20,11 +20,11 @@ export default {
   data() {
     return {
       options: [
-        { value: '选项1', label: '黄金糕' },
-        { value: '选项2', label: '双皮奶' },
-        { value: '选项3', label: '蚵仔煎' },
-        { value: '选项4', label: '龙须面' },
-        { value: '选项5', label: '北京烤鸭' }
+        { value: '选项1', label: '北京' },
+        { value: '选项2', label: '上海' },
+        { value: '选项3', label: '天津' },
+        { value: '选项4', label: '重庆' },
+        { value: '选项5', label: '深圳' }
       ],
       value: ''
     }

package/demos/pc/app/select/slot-reference-composition-api.vue

@@ -15,11 +15,11 @@ import { iconSetting } from '@opentiny/vue-icon'
 const TinyIconSetting = iconSetting()
 
 const options = ref([
-  { value: '选项1', label: '黄金糕' },
-  { value: '选项2', label: '双皮奶' },
-  { value: '选项3', label: '蚵仔煎' },
-  { value: '选项4', label: '龙须面' },
-  { value: '选项5', label: '北京烤鸭' }
+  { value: '选项1', label: '北京' },
+  { value: '选项2', label: '上海' },
+  { value: '选项3', label: '天津' },
+  { value: '选项4', label: '重庆' },
+  { value: '选项5', label: '深圳' }
 ])
 const value = ref('')
 </script>

package/demos/pc/app/select/slot-reference.spec.ts

@@ -12,5 +12,5 @@ test('custom-reference', async ({ page }) => {
 
   await expect(option).toHaveCount(0)
   await reference.click()
-  await option.filter({ hasText: '黄金糕' }).click()
+  await option.filter({ hasText: '北京' }).click()
 })

package/demos/pc/app/select/slot-reference.vue

@@ -20,11 +20,11 @@ export default {
   data() {
     return {
       options: [
-        { value: '选项1', label: '黄金糕' },
-        { value: '选项2', label: '双皮奶' },
-        { value: '选项3', label: '蚵仔煎' },
-        { value: '选项4', label: '龙须面' },
-        { value: '选项5', label: '北京烤鸭' }
+        { value: '选项1', label: '北京' },
+        { value: '选项2', label: '上海' },
+        { value: '选项3', label: '天津' },
+        { value: '选项4', label: '重庆' },
+        { value: '选项5', label: '深圳' }
       ],
       value: ''
     }

package/demos/pc/app/select/tag-type-composition-api.vue

@@ -9,13 +9,13 @@ import { ref } from 'vue'
 import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
 
 const options = ref([
-  { value: '选项1', label: '黄金糕' },
-  { value: '选项2', label: '双皮奶' },
-  { value: '选项3', label: '蚵仔煎' },
-  { value: '选项4', label: '龙须面' },
-  { value: '选项5', label: '北京烤鸭' },
-  { value: '选项6', label: '螺蛳粉' },
-  { value: '选项7', label: '小龙虾' }
+  { value: '选项1', label: '北京' },
+  { value: '选项2', label: '上海' },
+  { value: '选项3', label: '天津' },
+  { value: '选项4', label: '重庆' },
+  { value: '选项5', label: '深圳' },
+  { value: '选项6', label: '南京' },
+  { value: '选项7', label: '成都' }
 ])
 const value = ref(['选项1', '选项2'])
 </script>

package/demos/pc/app/select/tag-type.vue

@@ -15,13 +15,13 @@ export default {
   data() {
     return {
       options: [
-        { value: '选项1', label: '黄金糕' },
-        { value: '选项2', label: '双皮奶' },
-        { value: '选项3', label: '蚵仔煎' },
-        { value: '选项4', label: '龙须面' },
-        { value: '选项5', label: '北京烤鸭' },
-        { value: '选项6', label: '螺蛳粉' },
-        { value: '选项7', label: '小龙虾' }
+        { value: '选项1', label: '北京' },
+        { value: '选项2', label: '上海' },
+        { value: '选项3', label: '天津' },
+        { value: '选项4', label: '重庆' },
+        { value: '选项5', label: '深圳' },
+        { value: '选项6', label: '南京' },
+        { value: '选项7', label: '成都' }
       ],
       value: ['选项1', '选项2']
     }

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

@@ -23,10 +23,20 @@ export default {
         'en-US': 'Multiple'
       },
       desc: {
-        'zh-CN':
-          '<p>通过 <code>multiple</code> 属性启用多选功能，此时 <code>v-model</code> 的值为当前选中值所组成的数组。默认选中值会以标签（Tag 组件）展示。</p>\n<p>通过 <code>multiple-limit</code> 属性限制最多可选择的个数，默认为 0 不限制。</p>\n<p>多选时，通过给 option 标签配置 <code>required</code> 或者在 options 配置项中添加 <code>required</code> 属性，来设置必选选项。</p>\n<p>通过 <code>dropdown-icon</code> 属性可自定义下拉图标，<code>drop-style</code> 属性可自定义下拉选项样式。<p>',
-        'en-US':
-          '<p>Enable the multi-selection function through the <code>multiple</code> attribute, where the value of the <code>v-model</code> is an array composed of the currently selected values. The default selected value will be displayed as a tag component. </p>\n<p>Limit the maximum number of choices through the <code>multiple-limit</code> attribute, with a default value of 0 and no limit.</p>\n<p>If you select multiple options, you can configure the <code>required</code> attribute for the option tag or add the <code>required</code> attribute to the options configuration item to set the mandatory options. </p><p>You can use the <code>dropdown-icon</code> attribute to customize the drop-down icon, and the <code>drop-style</code> attribute to customize the drop-down option style.<p>'
+        'zh-CN': `
+            通过 <code>multiple</code> 属性启用多选功能，此时 <code>v-model</code> 的值为当前选中值所组成的数组。默认选中值会以标签（Tag 组件）展示。<br>
+            通过 <code>multiple-limit</code> 属性限制最多可选择的个数，默认为 0 不限制。<br>
+            通过 <code>show-limit-text</code> 属性限制最多可选择的个数，默认为 0 不限制。<br>
+            多选时，通过给 option 标签配置 <code>required</code> 或者在 options 配置项中添加 <code>required</code> 属性，来设置必选选项。<br>
+            通过 <code>dropdown-icon</code> 属性可自定义下拉图标，<code>drop-style</code> 属性可自定义下拉选项样式。<br>
+        `,
+        'en-US': `
+            Use the <code>multiple</code> attribute to enable the multi-selection function. In this case, the value of <code>v-model</code> is an array of selected values. By default, the selected value is displayed as a tag (Tag component).<br>
+            The <code>multiple-limit</code> attribute is used to limit the maximum number of users that can be selected. The default value is 0.
+            The <code>show-limit-text</code> attribute is used to limit the maximum number of users that can be selected. The default value is 0, which is not limited.<br>
+            When multiple options are selected, you can set <code>required</code> for the option tag or add the <code>required</code> attribute to the options configuration item to set mandatory options.<br>
+            You can use the <code>dropdown-icon</code> attribute to customize the drop-down icon, and the <code>drop-style</code> attribute to customize the style of the drop-down options.<br>
+        `
       },
       codeFiles: ['multiple.vue']
     },
@@ -589,6 +599,19 @@ export default {
       },
       codeFiles: ['slot-label.vue']
     },
+    {
+      demoId: 'all-text',
+      name: {
+        'zh-CN': '自定义全部文本',
+        'en-US': 'Custom All Text'
+      },
+      desc: {
+        'zh-CN': '当下拉中显示全部时，通过<code>all-text</code> 属性自定义全部的显示文本',
+        'en-US':
+          'Use the <code>all-text</code> attribute to customize all displayed text when all is displayed in the drop-down list box.'
+      },
+      codeFiles: ['all-text.vue']
+    },
     {
       demoId: 'events',
       name: {

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

@@ -1,25 +1,19 @@
 <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-row :flex="true">
+        <tiny-col :span="8">
+          <tiny-statistic :value="num" :precision="0"></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 :span="8">
+          <tiny-statistic :value="num" :precision="2"></tiny-statistic>
         </tiny-col>
       </tiny-row>
     </tiny-layout>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Statistic as TinyStatistic, Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
 
 const num = 306526.23

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

@@ -1,18 +1,12 @@
 <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-row :flex="true">
+        <tiny-col :span="8">
+          <tiny-statistic :value="num" :precision="0"></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 :span="8">
+          <tiny-statistic :value="num" :precision="2"></tiny-statistic>
         </tiny-col>
       </tiny-row>
     </tiny-layout>

package/demos/pc/app/statistic/prefix-suffix-slot-composition-api.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <tiny-layout>
+      <tiny-row :flex="true">
+        <tiny-col :span="8">
+          <tiny-statistic :value="300" prefix="存储平均值" suffix="GB"></tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="8">
+          <tiny-statistic :value="306">
+            <template #prefix>已使用容量(GB)</template>
+            <template #suffix><span style="font-size: 32px">GB</span></template>
+          </tiny-statistic>
+        </tiny-col>
+      </tiny-row>
+    </tiny-layout>
+  </div>
+</template>
+
+<script setup>
+import { Statistic as TinyStatistic, Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
+</script>

package/demos/pc/app/statistic/prefix-suffix-slot.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <tiny-layout>
+      <tiny-row :flex="true">
+        <tiny-col :span="8">
+          <tiny-statistic :value="300" prefix="存储平均值" suffix="GB"></tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="8">
+          <tiny-statistic :value="306">
+            <template #prefix>已使用容量(GB)</template>
+            <template #suffix><span style="font-size: 32px">GB</span></template>
+          </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
+  }
+}
+</script>

package/demos/pc/app/statistic/statistic-slot-composition-api.vue

@@ -1,28 +1,13 @@
 <template>
   <div>
     <tiny-layout>
-      <tiny-row :flex="true" class="row-bg">
-        <tiny-col :span="3">
-          <tiny-statistic :value="10010258" :precision="0">
-            <template #title> 活跃度 </template>
-          </tiny-statistic>
-        </tiny-col>
-        <tiny-col :span="3">
-          <tiny-statistic :value="num" :precision="2" :title="msg"> </tiny-statistic>
-        </tiny-col>
-        <tiny-col :span="3">
-          <tiny-statistic :value="num" :precision="2" :title="money">
-            <template #title:data="{ scoped }">{{ scoped }}</template>
-          </tiny-statistic>
+      <tiny-row :flex="true">
+        <tiny-col :span="8">
+          <tiny-statistic :value="10010258" :title="{ value: '存储总量', position: 'top' }"> </tiny-statistic>
         </tiny-col>
-        <tiny-col :span="3">
-          <tiny-statistic :value="num" :precision="0" title="点赞数量">
-            <template #prefix> Like:</template>
-          </tiny-statistic>
-        </tiny-col>
-        <tiny-col :span="3">
-          <tiny-statistic :value="600" :precision="0" title="队伍比分">
-            <template #suffix>/220</template>
+        <tiny-col :span="8">
+          <tiny-statistic :value="306526.23" :title="{ position: 'bottom' }">
+            <template #title>存储平均值</template>
           </tiny-statistic>
         </tiny-col>
       </tiny-row>
@@ -30,10 +15,6 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Statistic as TinyStatistic, Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
-
-const num = 306526.23
-const msg = { value: '额度' }
-const money = { value: '存款' }
 </script>

package/demos/pc/app/statistic/statistic-slot.vue

@@ -1,28 +1,13 @@
 <template>
   <div>
     <tiny-layout>
-      <tiny-row :flex="true" class="row-bg">
-        <tiny-col :span="3">
-          <tiny-statistic :value="10010258" :precision="0">
-            <template #title> 活跃度 </template>
-          </tiny-statistic>
-        </tiny-col>
-        <tiny-col :span="3">
-          <tiny-statistic :value="num" :precision="2" :title="msg"> </tiny-statistic>
-        </tiny-col>
-        <tiny-col :span="3">
-          <tiny-statistic :value="num" :precision="2" :title="money">
-            <template #title:data="{ scoped }">{{ scoped }}</template>
-          </tiny-statistic>
-        </tiny-col>
-        <tiny-col :span="3">
-          <tiny-statistic :value="num" :precision="0" title="点赞数量">
-            <template #prefix> Like:</template>
-          </tiny-statistic>
+      <tiny-row :flex="true">
+        <tiny-col :span="8">
+          <tiny-statistic :value="10010258" :title="{ value: '存储总量', position: 'top' }"> </tiny-statistic>
         </tiny-col>
-        <tiny-col :span="3">
-          <tiny-statistic :value="600" :precision="0" title="队伍比分">
-            <template #suffix>/220</template>
+        <tiny-col :span="8">
+          <tiny-statistic :value="306526.23" :title="{ position: 'bottom' }">
+            <template #title>存储平均值</template>
           </tiny-statistic>
         </tiny-col>
       </tiny-row>
@@ -39,13 +24,6 @@ export default {
     TinyLayout: Layout,
     TinyRow: Row,
     TinyCol: Col
-  },
-  data() {
-    return {
-      num: 306526.23,
-      msg: { value: '额度' },
-      money: { value: '存款' }
-    }
   }
 }
 </script>

package/demos/pc/app/statistic/statistic-style-composition-api.vue

@@ -1,20 +1,24 @@
 <template>
   <div>
     <tiny-layout>
-      <tiny-row :flex="true" class="row-bg">
+      <tiny-row :flex="true">
         <tiny-col :span="6">
-          <tiny-statistic :value="num" :value-style="{ color: '#b12220' }" :precision="0" title="点赞数量">
-            <template #prefix> Like:</template>
+          <tiny-statistic
+            :value="306526"
+            :value-style="{ 'color': '#3ac295' }"
+            :title="{ value: '进行中', position: 'top' }"
+          >
           </tiny-statistic>
         </tiny-col>
         <tiny-col :span="6">
-          <tiny-statistic :value="num" :value-style="{ 'color': '#3ac295' }" :precision="0" title="点赞数量">
-            <template #prefix> Like:</template>
-          </tiny-statistic>
-        </tiny-col>
-        <tiny-col :span="6">
-          <tiny-statistic :value="num" :value-style="[{ 'color': '#e37d29' }]" :precision="0" title="点赞数量">
-            <template #prefix> Like:</template>
+          <tiny-statistic
+            :value="306526.23"
+            :value-style="[{ 'color': '#eb1212', 'text-align': 'center', 'width': '200px' }]"
+            :title="{ position: 'bottom' }"
+          >
+            <template #title>
+              <div class="title-content">失败</div>
+            </template>
           </tiny-statistic>
         </tiny-col>
       </tiny-row>
@@ -22,8 +26,14 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Statistic as TinyStatistic, Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
-
-const num = 306526.23
 </script>
+
+<style scoped>
+.title-content {
+  width: 200px;
+  text-align: center;
+  color: #a9a9a9;
+}
+</style>