@opentiny/vue-docs 2.2.4 → 2.2.6

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

@@ -6,8 +6,8 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基础用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': '',
-        'en-US': ''
+        'zh-CN': '<p>通过设置 <code>fetch-suggestions</code> 方法设置输入建议。</p>',
+        'en-US': '<p> Set input suggestions by setting the <code>fetch-suggestions</code> method.'
       },
       'codeFiles': ['basic-usage.vue']
     },
@@ -43,8 +43,10 @@ export default {
       'demoId': 'slot',
       'name': { 'zh-CN': '插槽', 'en-US': 'slot' },
       'desc': {
-        'zh-CN': '<p>分别配置 <code>prepend</code>、<code>append</code>、<code>prefix</code>、<code>suffix</code>、<code>default</code> 插槽。</p>',
-        'en-US': '<p>Configure <code>prepend</code>, <code>append</code>, <code>prefix</code>, <code>default</code>, and <code>suffix</code> slots.</p>'
+        'zh-CN':
+          '<p>分别配置 <code>prepend</code>、<code>append</code>、<code>prefix</code>、<code>suffix</code>、<code>default</code> 插槽。</p>',
+        'en-US':
+          '<p>Configure <code>prepend</code>, <code>append</code>, <code>prefix</code>, <code>default</code>, and <code>suffix</code> slots.</p>'
       },
       'codeFiles': ['slot.vue']
     },
@@ -113,8 +115,7 @@ export default {
       'demoId': 'placement',
       'name': { 'zh-CN': '菜单弹出位置', 'en-US': 'Menu Pop-up Position' },
       'desc': {
-        'zh-CN':
-          '<p><code>placement</code> 属性可以设置菜单弹出位置，默认为 <code>bottom-start</code>。</p>\n',
+        'zh-CN': '<p><code>placement</code> 属性可以设置菜单弹出位置，默认为 <code>bottom-start</code>。</p>\n',
         'en-US':
           '<p><code>placement</code> property can be used to set the menu pop-up position. The default value is <code>bottom-start</code>. </p>\n'
       },
@@ -182,7 +183,7 @@ export default {
         {
           'name': 'value-key',
           'type': 'string',
-          'defaultValue': 'value',
+          'defaultValue': `'value'`,
           'desc': {
             'zh-CN': '在输入建议对象中，用于显示和匹配输入的键名',
             'en-US': 'In the Input Suggestion object, key names for displaying and matching inputs'
@@ -210,8 +211,7 @@ export default {
           'defaultValue': `'bottom-start'`,
           'desc': {
             'zh-CN': '菜单弹出位置',
-            'en-US':
-              'Menu pop-up position'
+            'en-US': 'Menu pop-up position'
           },
           'demoId': 'placement'
         },
@@ -249,7 +249,7 @@ export default {
           'name': 'name',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': 'input元素的原生属性', 'en-US': 'Native attributes of the input element' }
+          'desc': { 'zh-CN': 'input 元素的原生属性', 'en-US': 'Native attributes of the input element' }
         },
         {
           'name': 'select-when-unmatched',
@@ -271,14 +271,14 @@ export default {
         },
         {
           'name': 'prefix-icon',
-          'type': 'Component',
+          'type': 'VueComponent',
           'defaultValue': '',
           'desc': { 'zh-CN': '输入框头部图标', 'en-US': 'Icon on the header of the text box' },
           'demoId': 'custom-icon'
         },
         {
           'name': 'suffix-icon',
-          'type': 'Component',
+          'type': 'VueComponent',
           'defaultValue': '',
           'desc': { 'zh-CN': '输入框尾部图标', 'en-US': 'Icon at the end of the text box' },
           'demoId': 'custom-icon'
@@ -330,10 +330,11 @@ export default {
       'events': [
         {
           'name': 'select',
-          'type': '(selection: object) => void',
+          'type': '(selection: IAutocompleteSuggestionItem) => void',
+          'typeAnchorName': 'IAutocompleteSuggestionItem',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '点击选中建议项时触发，回调参数为fetch-suggestions中传入的项',
+            'zh-CN': '点击选中建议项时触发，回调参数为 fetch-suggestions 中传入的项',
             'en-US':
               'Triggered when you click to select a suggestion item. The callback parameter is the item passed in fetch-suggestions'
           },
@@ -373,13 +374,26 @@ export default {
           'name': 'default',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '下拉列表项插槽，插槽参数: arg: { slotScope: object }, 其中object是fetch-suggestions中传入的项', 'en-US': 'Drop-down list item slot, slot parameter: arg: {slotScope: object}, where object is the item passed in fetch-suggestions' },
+          'desc': {
+            'zh-CN':
+              '下拉列表项插槽，插槽参数: arg: { slotScope: IAutocompleteSuggestionItem }, 其中 slotScope 是 fetch-suggestions 中传入的项',
+            'en-US':
+              'Drop-down list item slot, slot parameter: arg: { slotScope: IAutocompleteSuggestionItem }, where slotScope is the item passed in fetch-suggestions'
+          },
           'demoId': 'slot'
         }
       ]
     }
   ],
   types: [
+    {
+      name: 'IAutocompleteSuggestionItem',
+      type: 'type',
+      code: `interface IAutocompleteSuggestionItem {
+  [key: string]: string | undefined
+  value?: string
+}`
+    },
     {
       name: 'IAutocompletePlacement',
       type: 'type',
@@ -388,7 +402,7 @@ export default {
     {
       name: 'IAutocompleteFetchSuggestions',
       type: 'type',
-      code: 'type IAutocompleteFetchSuggestions = (queryString: string, callback: (suggestions: object[]) => void) => void'
+      code: 'type IAutocompleteFetchSuggestions = (queryString: string, callback: (suggestions: IAutocompleteSuggestionItem[]) => void) => void'
     }
   ]
 }

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

@@ -6,8 +6,8 @@ export default {
       'demoId': 'base',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': `<code>Breadcrumb</code>：通过 <code>select</code> 监听面包屑选中事件；<br/>
-                  <code>BreadcrumbItem</code>：通过 <code>to</code> 设置选项路由跳转对象，<code></code> 设置选项名称，<code>select</code> 监听选项选中事件。`,
+        'zh-CN': `<code>Breadcrumb</code>：通过 <code>select</code> 监听面包屑选中事件。<br/>
+                  <code>BreadcrumbItem</code>：通过 <code>to</code> 设置选项路由跳转对象，<code>label</code> 设置选项名称，<code>select</code> 监听选项选中事件。`,
         'en-US': `<code>Breadcrumb</code>: Listen for breadcrumb selection events through<code>select</code>; <br/>
                   <code>BreadcrumbItem</code>: Route the jump object through the <code>to</code>setting option,<code></code>setting option name,<code>select</code>listening for option selection events.`
       },
@@ -71,7 +71,7 @@ export default {
         },
         {
           'name': 'separator-icon',
-          'type': 'VueComponent',
+          'type': 'vueComponent',
           'defaultValue': '',
           'desc': { 'zh-CN': '图标分隔符', 'en-US': 'Icon separator' },
           'demoId': 'separator'

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

@@ -53,5 +53,7 @@ const IconSearch = iconSearch()
 }
 .tiny-button {
   margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
 }
 </style>

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

@@ -64,5 +64,7 @@ export default {
 }
 .tiny-button {
   margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
 }
 </style>

package/demos/pc/app/button/click-composition-api.vue

@@ -6,6 +6,6 @@
 import { Button as TinyButton, Modal } from '@opentiny/vue'
 
 function click() {
-  Modal.message('click')
+  Modal.message({ message: 'click', status: 'info' })
 }
 </script>

package/demos/pc/app/button/click.vue

@@ -11,7 +11,7 @@ export default {
   },
   methods: {
     click() {
-      Modal.message('click')
+      Modal.message({ message: 'click', status: 'info' })
     }
   }
 }

package/demos/pc/app/button/dynamic-disabled-composition-api.vue

@@ -18,6 +18,13 @@
       <tiny-button type="warning" :disabled="disabled" plain>警告按钮</tiny-button>
       <tiny-button type="danger" :disabled="disabled" plain>危险按钮</tiny-button>
     </tiny-row>
+
+    <tiny-row>
+      <tiny-button :disabled="disabled" ghost>幽灵按钮</tiny-button>
+      <tiny-button :icon="TinyIconSearch" :disabled="disabled">图标按钮</tiny-button>
+      <tiny-button :icon="TinyIconSearch" :disabled="disabled"> </tiny-button>
+      <tiny-button :icon="TinyIconSearch" :disabled="disabled" circle> </tiny-button>
+    </tiny-row>
   </tiny-layout>
 </template>
 
@@ -27,7 +34,7 @@ import { Button as TinyButton, Layout as TinyLayout, Row as TinyRow, Switch as T
 import { iconSearch } from '@opentiny/vue-icon'
 
 const disabled = ref(false)
-const IconSearch = iconSearch()
+const TinyIconSearch = iconSearch()
 </script>
 
 <style scoped>
@@ -37,5 +44,7 @@ const IconSearch = iconSearch()
 
 .tiny-button {
   margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
 }
 </style>

package/demos/pc/app/button/{dynamic-disabled.spec.js → dynamic-disabled.spec.ts}

@@ -6,6 +6,7 @@ test('测试禁用状态是否生效', async ({ page }) => {
 
   const demo = page.locator('#dynamic-disabled')
   const switchBtn = demo.locator('.tiny-switch')
+  const ghostBtn = demo.getByRole('button', { name: '幽灵按钮' })
 
   await switchBtn.click()
   await expect(demo.locator('.tiny-button').first()).toBeDisabled()
@@ -15,6 +16,9 @@ test('测试禁用状态是否生效', async ({ page }) => {
   await expect(demo.getByRole('button', { name: '默认按钮' }).first()).toBeDisabled()
   await expect(demo.getByRole('button', { name: '主要按钮' }).first()).toBeDisabled()
   await expect(demo.getByRole('button', { name: '成功按钮' }).first()).toBeDisabled()
+  await expect(ghostBtn).toHaveCSS('color', 'rgb(173, 176, 184)')
+  await expect(ghostBtn).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(ghostBtn).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')
 
   await switchBtn.click()
   await expect(demo.locator('.tiny-button').first()).not.toBeDisabled()

package/demos/pc/app/button/dynamic-disabled.vue

@@ -11,19 +11,26 @@
     </tiny-row>
 
     <tiny-row>
-      <tiny-button :disabled="disabled" plain>默认按钮</tiny-button>
+      <tiny-button :disabled="disabled" plain>朴素按钮</tiny-button>
       <tiny-button type="primary" :disabled="disabled" plain>主要按钮</tiny-button>
       <tiny-button type="success" :disabled="disabled" plain>成功按钮</tiny-button>
       <tiny-button type="info" :disabled="disabled" plain>信息按钮</tiny-button>
       <tiny-button type="warning" :disabled="disabled" plain>警告按钮</tiny-button>
       <tiny-button type="danger" :disabled="disabled" plain>危险按钮</tiny-button>
     </tiny-row>
+
+    <tiny-row>
+      <tiny-button :disabled="disabled" ghost>幽灵按钮</tiny-button>
+      <tiny-button :icon="TinyIconSearch" :disabled="disabled">图标按钮</tiny-button>
+      <tiny-button :icon="TinyIconSearch" :disabled="disabled"> </tiny-button>
+      <tiny-button :icon="TinyIconSearch" :disabled="disabled" circle> </tiny-button>
+    </tiny-row>
   </tiny-layout>
 </template>
 
 <script>
 import { Button, Layout, Row, Switch } from '@opentiny/vue'
-import { IconSearch } from '@opentiny/vue-icon'
+import { iconSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
@@ -35,7 +42,7 @@ export default {
   data() {
     return {
       disabled: false,
-      IconSearch: IconSearch()
+      TinyIconSearch: iconSearch()
     }
   }
 }
@@ -47,5 +54,7 @@ export default {
 }
 .tiny-button {
   margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
 }
 </style>

package/demos/pc/app/button/ghost-composition-api.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="gray-bg">
+    <tiny-button ghost>幽灵按钮</tiny-button>
+    <tiny-button ghost type="primary">主要按钮</tiny-button>
+    <tiny-button ghost type="success">成功按钮</tiny-button>
+    <tiny-button ghost type="info">信息按钮</tiny-button>
+    <tiny-button ghost type="warning">告警按钮</tiny-button>
+    <tiny-button ghost type="danger">危险按钮</tiny-button>
+  </div>
+</template>
+
+<script setup>
+import { Button as TinyButton } from '@opentiny/vue'
+</script>
+
+<style scoped>
+.gray-bg {
+  background: #ccc;
+  padding: 20px 10px 10px;
+}
+.tiny-button {
+  margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
+}
+</style>

package/demos/pc/app/button/ghost.spec.ts

@@ -0,0 +1,69 @@
+import { test, expect } from '@playwright/test'
+
+test('幽灵按钮', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('button#ghost')
+
+  const demo = page.locator('#ghost')
+  const getGhostBtn = (index: number) => demo.locator('.tiny-button').nth(index)
+
+  // 默认幽灵按钮
+  await expect(getGhostBtn(0)).toHaveCSS('color', 'rgb(37, 43, 58)')
+  await expect(getGhostBtn(0)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')
+  await page.waitForTimeout(200)
+  await getGhostBtn(0).hover()
+  await expect(getGhostBtn(0)).toHaveCSS('color', 'rgb(94, 124, 224)')
+  await expect(getGhostBtn(0)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')
+
+  // 主要幽灵按钮
+  await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(94, 124, 224)')
+  await expect(getGhostBtn(1)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')
+  await page.waitForTimeout(200)
+  await getGhostBtn(1).hover()
+  await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(118, 147, 245)')
+  await expect(getGhostBtn(1)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(118, 147, 245)')
+
+  // 成功幽灵按钮
+  await expect(getGhostBtn(2)).toHaveCSS('color', 'rgb(80, 212, 171)')
+  await expect(getGhostBtn(2)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(2)).toHaveCSS('border-bottom-color', 'rgb(80, 212, 171)')
+  await page.waitForTimeout(200)
+  await getGhostBtn(2).hover()
+  await expect(getGhostBtn(2)).toHaveCSS('color', 'rgb(172, 242, 220)')
+  await expect(getGhostBtn(2)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(2)).toHaveCSS('border-bottom-color', 'rgb(172, 242, 220)')
+
+  // 信息幽灵按钮
+  await expect(getGhostBtn(3)).toHaveCSS('color', 'rgb(37, 43, 58)')
+  await expect(getGhostBtn(3)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(3)).toHaveCSS('border-bottom-color', 'rgb(37, 43, 58)')
+  await page.waitForTimeout(200)
+  await getGhostBtn(3).hover()
+  await expect(getGhostBtn(3)).toHaveCSS('color', 'rgb(92, 97, 115)')
+  await expect(getGhostBtn(3)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(3)).toHaveCSS('border-bottom-color', 'rgb(92, 97, 115)')
+
+  // 告警幽灵按钮
+  await expect(getGhostBtn(4)).toHaveCSS('color', 'rgb(250, 152, 65)')
+  await expect(getGhostBtn(4)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(4)).toHaveCSS('border-bottom-color', 'rgb(250, 152, 65)')
+  await page.waitForTimeout(200)
+  await getGhostBtn(4).hover()
+  await expect(getGhostBtn(4)).toHaveCSS('color', 'rgb(250, 194, 10)')
+  await expect(getGhostBtn(4)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(4)).toHaveCSS('border-bottom-color', 'rgb(250, 194, 10)')
+
+  // 危险幽灵按钮
+  await expect(getGhostBtn(5)).toHaveCSS('color', 'rgb(199, 0, 11)')
+  await expect(getGhostBtn(5)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(199, 0, 11)')
+  await page.waitForTimeout(200)
+  await getGhostBtn(5).hover()
+  await expect(getGhostBtn(5)).toHaveCSS('color', 'rgb(214, 74, 82)')
+  await expect(getGhostBtn(5)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(214, 74, 82)')
+})

package/demos/pc/app/button/ghost.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="gray-bg">
+    <tiny-button ghost>幽灵按钮</tiny-button>
+    <tiny-button ghost type="primary">主要按钮</tiny-button>
+    <tiny-button ghost type="success">成功按钮</tiny-button>
+    <tiny-button ghost type="info">信息按钮</tiny-button>
+    <tiny-button ghost type="warning">告警按钮</tiny-button>
+    <tiny-button ghost type="danger">危险按钮</tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>
+
+<style scoped>
+.gray-bg {
+  background: #ccc;
+  padding: 20px 10px 10px;
+}
+.tiny-button {
+  margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
+}
+</style>

package/demos/pc/app/button/icon-composition-api.vue

@@ -39,5 +39,7 @@ const TinyIconSearch = iconSearch()
 }
 .tiny-button {
   margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
 }
 </style>

package/demos/pc/app/button/icon.vue

@@ -50,5 +50,7 @@ export default {
 }
 .tiny-button {
   margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
 }
 </style>

package/demos/pc/app/button/loading-composition-api.vue

@@ -16,5 +16,7 @@ import { Button as TinyButton } from '@opentiny/vue'
 <style scoped>
 .tiny-button {
   margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
 }
 </style>

package/demos/pc/app/button/loading.vue

@@ -22,5 +22,7 @@ export default {
 <style scoped>
 .tiny-button {
   margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
 }
 </style>

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

@@ -68,5 +68,7 @@ const TinyIconEdit = iconEdit()
 
 .tiny-button {
   margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
 }
 </style>

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

@@ -79,5 +79,7 @@ export default {
 
 .tiny-button {
   margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
 }
 </style>

package/demos/pc/app/button/text-composition-api.vue

@@ -24,7 +24,7 @@ const TinyIconMail = iconMail()
 <style scoped>
 .title {
   margin-top: 16px;
-  padding: 10px 0 6px 10px;
+  padding: 10px 0 6px 0;
   font-size: 16px;
   font-weight: bold;
 }

package/demos/pc/app/button/text.vue

@@ -33,7 +33,7 @@ export default {
 <style scoped>
 .title {
   margin-top: 16px;
-  padding: 10px 0 6px 10px;
+  padding: 10px 0 6px 0;
   font-size: 16px;
   font-weight: bold;
 }

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

@@ -13,6 +13,15 @@ export default {
       },
       'codeFiles': ['basic-usage.vue']
     },
+    {
+      'demoId': 'ghost',
+      'name': { 'zh-CN': '幽灵按钮', 'en-US': 'Ghost button' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>ghost</code> 设置幽灵按钮。</p>',
+        'en-US': '<p>Set up ghost buttons via <code>ghost</code>.</p>'
+      },
+      'codeFiles': ['ghost.vue']
+    },
     {
       'demoId': 'dynamic-disabled',
       'name': { 'zh-CN': '动态禁用按钮', 'en-US': 'Dynamic Disable Button' },
@@ -139,6 +148,16 @@ export default {
           },
           'demoId': 'dynamic-disabled'
         },
+        {
+          'name': 'ghost',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '是否幽灵按钮',
+            'en-US': 'Is ghost button'
+          },
+          'demoId': 'ghost'
+        },
         {
           'name': 'icon',
           'type': 'VueComponent',
@@ -221,7 +240,8 @@ export default {
         },
         {
           'name': 'type',
-          'type': "'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'",
+          'type': 'IButtonType',
+          'typeAnchorName': 'IButtonType',
           'defaultValue': '--',
           'desc': {
             'zh-CN': '展示按钮不同的状态，设置为text则展示为文本按钮',
@@ -255,5 +275,12 @@ export default {
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'IButtonType',
+      type: 'interface',
+      code: `type IButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'`
+    }
   ]
 }

package/demos/pc/app/button-group/button-group-multiple-composition-api.vue

@@ -10,15 +10,15 @@ import { ButtonGroup as TinyButtonGroup } from '@opentiny/vue'
 
 const checkedVal = ref('Button1')
 const groupData = ref([
-  { text: 'Button1', value: 'Button1' },
-  { text: 'Button2', value: 'Button2' },
-  { text: 'Button3', value: 'Button3' },
-  { text: 'Button4', value: 'Button4' },
-  { text: 'Button5', value: 'Button5' },
-  { text: 'Button6', value: 'Button6' },
-  { text: 'Button7', value: 'Button7' },
-  { text: 'Button8', value: 'Button8' },
-  { text: 'Button9', value: 'Button9' },
+  { text: 'Button01', value: 'Button01' },
+  { text: 'Button02', value: 'Button02' },
+  { text: 'Button03', value: 'Button03' },
+  { text: 'Button04', value: 'Button04' },
+  { text: 'Button05', value: 'Button05' },
+  { text: 'Button06', value: 'Button06' },
+  { text: 'Button07', value: 'Button07' },
+  { text: 'Button08', value: 'Button08' },
+  { text: 'Button09', value: 'Button09' },
   { text: 'Button10', value: 'Button10' },
   { text: 'Button11', value: 'Button11' },
   { text: 'Button12', value: 'Button12' }

package/demos/pc/app/button-group/button-group-multiple.vue

@@ -15,15 +15,15 @@ export default {
     return {
       checkedVal: 'Button1',
       groupData: [
-        { text: 'Button1', value: 'Button1' },
-        { text: 'Button2', value: 'Button2' },
-        { text: 'Button3', value: 'Button3' },
-        { text: 'Button4', value: 'Button4' },
-        { text: 'Button5', value: 'Button5' },
-        { text: 'Button6', value: 'Button6' },
-        { text: 'Button7', value: 'Button7' },
-        { text: 'Button8', value: 'Button8' },
-        { text: 'Button9', value: 'Button9' },
+        { text: 'Button01', value: 'Button01' },
+        { text: 'Button02', value: 'Button02' },
+        { text: 'Button03', value: 'Button03' },
+        { text: 'Button04', value: 'Button04' },
+        { text: 'Button05', value: 'Button05' },
+        { text: 'Button06', value: 'Button06' },
+        { text: 'Button07', value: 'Button07' },
+        { text: 'Button08', value: 'Button08' },
+        { text: 'Button09', value: 'Button09' },
         { text: 'Button10', value: 'Button10' },
         { text: 'Button11', value: 'Button11' },
         { text: 'Button12', value: 'Button12' }

package/demos/pc/app/button-group/change-event-composition-api.vue

@@ -16,6 +16,6 @@ const groupData = ref([
 ])
 
 function handleChange(val) {
-  Modal.message(`change事件触发了，选中值为${val}`)
+  Modal.message({ message: `change事件触发了，选中值为${val}`, status: 'info' })
 }
 </script>

package/demos/pc/app/button-group/change-event.vue

@@ -23,7 +23,7 @@ export default {
   },
   methods: {
     handleChange(val) {
-      Modal.message(`change事件触发了，选中值为${val}`)
+      Modal.message({ message: `change事件触发了，选中值为${val}`, status: 'info' })
     }
   }
 }

package/demos/pc/app/button-group/show-edit-composition-api.vue

@@ -24,6 +24,6 @@ const groupData = ref([
 ])
 
 function handleEdit() {
-  Modal.message('edit事件触发了')
+  Modal.message({ message: 'edit事件触发了', status: 'info' })
 }
 </script>

package/demos/pc/app/button-group/show-edit.vue

@@ -31,7 +31,7 @@ export default {
   },
   methods: {
     handleEdit() {
-      Modal.message('edit事件触发了')
+      Modal.message({ message: 'edit事件触发了', status: 'info' })
     }
   }
 }

package/demos/pc/app/button-group/webdoc/button-group.js

@@ -6,10 +6,9 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN':
-          '<p>通过 <code>data</code> 设置按钮组数据，类型为 <a href="#IButtonGroupData">IButtonGroupData</a> ，通过 <code>v-model</code> 设置绑定值。</p>',
+        'zh-CN': '<p>通过 <code>data</code> 设置按钮组数据，<code>v-model</code> 设置绑定值。</p>',
         'en-US':
-          '<p>Set the button group data to type <a="# IButtonGroupData">IButtonGroupData</a> through <code>data</code> , and set the binding value through <code>v model</code> .</p>'
+          '<p>Set the button group data through <code>data</code> , and set the binding value through <code>v model</code> .</p>'
       },
       'codeFiles': ['basic-usage.vue']
     },