@opentiny/vue-docs 2.2.5 → 2.2.7

package/demos/mobile-first/app/tooltip/webdoc/tooltip.js

@@ -1,15 +1,14 @@
 export default {
   column: '2',
   owner: '',
-  demos: [
-    {
+  demos: [{
       demoId: 'basic-usage',
       name: {
         'zh-CN': '基本用法',
         'en-US': 'basic usage'
       },
       desc: {
-        'zh-CN': '<p></p>',
+        'zh-CN': '<p>按钮类型</p>',
         'en-US': '<p>button type</p>'
       },
       codeFiles: ['basic-usage.vue']
@@ -19,11 +18,11 @@ export default {
       demoId: 'dynamic-disable',
       name: {
         'zh-CN': '禁用',
-        'en-US': 'events'
+        'en-US': 'disabling'
       },
       desc: {
-        'zh-CN': '<p>通过 `disabled` 设置禁用<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过 `disabled` 设置禁用</p>',
+        'en-US': '<p>Disable by setting `disabled`</p>'
       },
       codeFiles: ['dynamic-disable.vue']
     },
@@ -31,12 +30,11 @@ export default {
       demoId: 'manual-control-tip',
       name: {
         'zh-CN': '手动控制',
-        'en-US': 'events'
+        'en-US': 'Manual control'
       },
       desc: {
-        'zh-CN':
-          '<p>手动控制模式，通过设置 `manual` 属性为 true 后，mouseenter 和 mouseleave 事件将不会生效,然后可以通过设置 `v-model` 动态控制显示和隐藏<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>手动控制模式，通过设置 `manual` 属性为 true 后，mouseenter 和 mouseleave 事件将不会生效,然后可以通过设置 `v-model` 动态控制显示和隐藏</p>',
+        'en-US': '<p>Manual control mode. After the `manual` attribute is set to true, the mouseenter and mouseleave events do not take effect. You can set the `v-model` to dynamically control the display and hiding of the events.</p>'
       },
       codeFiles: ['manual-control-tip.vue']
     },
@@ -44,11 +42,11 @@ export default {
       demoId: 'tooltip-theme',
       name: {
         'zh-CN': '主题',
-        'en-US': 'events'
+        'en-US': 'Subject'
       },
       desc: {
-        'zh-CN': '<p>通过 `effect` 属性设置主题,可选值 dark/light 两种主题。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过 `effect` 属性设置主题,可选值 dark/light 两种主题。</p>',
+        'en-US': '<p>Set the theme through the `effect` property. The options are dark and light.</p>'
       },
       codeFiles: ['tooltip-theme.vue']
     },
@@ -56,12 +54,11 @@ export default {
       demoId: 'open-delay',
       name: {
         'zh-CN': '自动隐藏和延迟时间',
-        'en-US': 'events'
+        'en-US': 'Auto-hide and delay time'
       },
       desc: {
-        'zh-CN':
-          '<p>通过 `hide-after` 属性设置 Tooltip 组件出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏。通过 `open-delay` 属性设置 Tooltip 组件延迟出现的时间，单位毫秒。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过 `hide-after` 属性设置 Tooltip 组件出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏。通过 `open-delay` 属性设置 Tooltip 组件延迟出现的时间，单位毫秒。<p>',
+        'en-US': '<p>The `hide-after` attribute is used to set the automatic hiding delay of the Tooltip component, in milliseconds. If the value is 0, the Tooltip component is not automatically hidden. The `open-delay` property is used to set the delay for the Tooltip component to appear, in milliseconds.</p>'
       },
       codeFiles: ['open-delay.vue']
     },
@@ -69,11 +66,11 @@ export default {
       demoId: 'tooltip-offset',
       name: {
         'zh-CN': '偏移量',
-        'en-US': 'events'
+        'en-US': 'Offset'
       },
       desc: {
-        'zh-CN': '<p>通过 `offset` 属性设置 Tooltip 组件出现位置的偏移量。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过 `offset` 属性设置 Tooltip 组件出现位置的偏移量。</p>',
+        'en-US': '<p>Use the `offset` property to set the offset where the Tooltip component appears.</p>'
       },
       codeFiles: ['tooltip-offset.vue']
     },
@@ -81,11 +78,11 @@ export default {
       demoId: 'enterable',
       name: {
         'zh-CN': '鼠标是否可进入',
-        'en-US': 'events'
+        'en-US': 'Whether the mouse can be accessed'
       },
       desc: {
-        'zh-CN': '<p>通过 `enterable` 属性设置鼠标是否可进入到 tooltip 中。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过 `enterable` 属性设置鼠标是否可进入到 tooltip 中。</p>',
+        'en-US': '<p>Use the `enterable` attribute to set whether the mouse can access the tooltip.</p>'
       },
       codeFiles: ['enterable.vue']
     },
@@ -93,11 +90,11 @@ export default {
       demoId: 'visible-arrow',
       name: {
         'zh-CN': '是否显示箭头',
-        'en-US': 'events'
+        'en-US': 'Whether to display arrows'
       },
       desc: {
-        'zh-CN': '<p>通过 `visible-arrow` 属性设置是否显示 Tooltip 箭头。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过 `visible-arrow` 属性设置是否显示 Tooltip 箭头。</p>',
+        'en-US': '<p>Use the `visible-arrow` property to set whether to display the Tooltip arrow.</p>'
       },
       codeFiles: ['visible-arrow.vue']
     },
@@ -105,11 +102,11 @@ export default {
       demoId: 'popper-class',
       name: {
         'zh-CN': '添加样式类名',
-        'en-US': 'events'
+        'en-US': 'Add Style Class Name'
       },
       desc: {
-        'zh-CN': '<p>通过 `popper-class` 属性为 Tooltip 的 popper 添加类名。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过 `popper-class` 属性为 Tooltip 的 popper 添加类名。</p>',
+        'en-US': '<p>Use the `popper-class` attribute to add a class name to the tooltip\'s popper.</p>'
       },
       codeFiles: ['popper-class.vue']
     },
@@ -117,11 +114,11 @@ export default {
       demoId: 'tooltip-content',
       name: {
         'zh-CN': '插槽',
-        'en-US': 'events'
+        'en-US': 'Slots'
       },
       desc: {
         'zh-CN': '<p>设置过通过 `content` 插槽添加自定义内容。滤类型<p>',
-        'en-US': '<p>bbutton click</p>'
+        'en-US': '<p>Set to add custom content through the `content` slot. Filter Type</p>'
       },
       codeFiles: ['tooltip-content.vue']
     },
@@ -129,12 +126,11 @@ export default {
       demoId: 'popper-options',
       name: {
         'zh-CN': 'popper 配置',
-        'en-US': 'events'
+        'en-US': 'Popper Configuration'
       },
       desc: {
-        'zh-CN':
-          '<p>通过 `popper-options` 属性为 Tooltip 的 popper 配置参数,具体可参考[popper.js](https://popper.js.org/)<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过 `popper-options` 属性为 Tooltip 的 popper 配置参数,具体可参考[popper.js](https://popper.js.org/)</p>',
+        'en-US': '<p>Use the `popper-options` attribute to configure popper parameters for Tooltip. For details, see [popper.js](https://popper.js.org/).</p>'
       },
       codeFiles: ['popper-options.vue']
     },
@@ -142,11 +138,11 @@ export default {
       demoId: 'popper-options-bubbling',
       name: {
         'zh-CN': 'popper 配置通过 bubbling 控制 tip 位置',
-        'en-US': 'events'
+        'en-US': 'The popper configuration uses bubbling to control the tip position.'
       },
       desc: {
-        'zh-CN': '<p>popperOptions.bubbling 配置为 true 时，所有的父元素包含滚动条，滚动时都会动态改变 tip 的位置<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>popperOptions.bubbling 配置为 true 时，所有的父元素包含滚动条，滚动时都会动态改变 tip 的位置</p>',
+        'en-US': '<p>When popperOptions.bubbling is set to true, all parent elements contain scroll bars. During scrolling, the position of tip is dynamically changed.</p>'
       },
       codeFiles: ['popper-options-bubbling.vue']
     },
@@ -154,11 +150,11 @@ export default {
       demoId: 'tabindex',
       name: {
         'zh-CN': 'tabindex 配置',
-        'en-US': 'events'
+        'en-US': 'tabindex configuration'
       },
       desc: {
-        'zh-CN': '<p>通过配置 `tabindex`， 配置的属性会自动添加到该组件的触发原上。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过配置 `tabindex`， 配置的属性会自动添加到该组件的触发原上。</p>',
+        'en-US': '<p>By configuring `tabindex`, the configured attributes are automatically added to the trigger source of the component.</p>'
       },
       codeFiles: ['tabindex.vue']
     },
@@ -166,12 +162,11 @@ export default {
       demoId: 'content-pre',
       name: {
         'zh-CN': '文本预格式化',
-        'en-US': 'events'
+        'en-US': 'Text Preformatting'
       },
       desc: {
-        'zh-CN':
-          '<p>配置 `pre` 为 `true`，就会预格式化 `content` 文本。<br>被包围在 `<pre></pre>` 标签元素中的文本会保留空格和换行符，文本也会呈现为等宽字体。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>配置 `pre` 为 `true`，就会预格式化 `content` 文本。<br>被包围在 `<pre></pre>` 标签元素中的文本会保留空格和换行符，文本也会呈现为等宽字体。</p>',
+        'en-US': '<p>If `pre` is set to `true`, the `content` text is preformatted. <br>Text enclosed in the `<pre></pre>` tag element retains spaces and newline characters, and the text is rendered in an equal-width font.</p>'
       },
       codeFiles: ['content-pre.vue']
     },
@@ -179,11 +174,11 @@ export default {
       demoId: 'content-render',
       name: {
         'zh-CN': '自定义渲染',
-        'en-US': 'events'
+        'en-US': 'Custom Rendering'
       },
       desc: {
-        'zh-CN': '<p>使用属性 `renderContent` 配置自定义渲染方法<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>使用属性 `renderContent` 配置自定义渲染方法</p>',
+        'en-US': '<p>Configure a custom rendering method using the property `renderContent`</p>'
       },
       codeFiles: ['content-render.vue']
     },
@@ -191,15 +186,14 @@ export default {
       demoId: 'z-index',
       name: {
         'zh-CN': '弹出层 zIndex',
-        'en-US': 'events'
+        'en-US': 'z-index'
       },
       desc: {
-        'zh-CN':
-          '<p>设置`z-index`属性为`relative`时，弹出层样式属性 zIndex 值参考 Reference 及其父级 Dom。<br>设置`z-index`属性为默认值`next`时，弹出层样式属性 zIndex 值由组件库内部维护。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>设置`z-index`属性为`relative`时，弹出层样式属性 zIndex 值参考 Reference 及其父级 Dom。<br>设置`z-index`属性为默认值`next`时，弹出层样式属性 zIndex 值由组件库内部维护。</p>',
+        'en-US': '<p>When the `z-index` attribute is set to `relative`, the value of zIndex of the pop-up layer style attribute is Reference and its parent Dom. <br>When the `z-index` attribute is set to the default value `next`, the value of the pop-up layer style attribute zIndex is maintained by the component library.</p>'
       },
       codeFiles: ['z-index.vue']
     }
   ],
   apis: []
-}
+}

package/demos/pc/app/action-menu/disabled.vue

@@ -23,7 +23,8 @@ export default {
           label: '关机'
         },
         {
-          label: '重启'
+          label: '重启',
+          disabled: true
         },
         {
           label: '网络设置',

package/demos/pc/app/action-menu/icon-composition-api.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <p>场景1：只显示图标</p>
+    <tiny-action-menu
+      class="custom-icon"
+      :options="options"
+      :suffix-icon="tinyIconEllipsis"
+      more-text=""
+      spacing="12px"
+      :max-show-num="3"
+    >
+    </tiny-action-menu>
+    <p>场景2：只显示文本</p>
+    <tiny-action-menu :options="options1" :show-icon="false" :max-show-num="3"> </tiny-action-menu>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+import { iconWebPlus, iconSuccessful, iconCloseSquare, iconEllipsis } from '@opentiny/vue-icon'
+
+const options = ref([
+  {
+    label: '远程登陆',
+    icon: iconWebPlus()
+  },
+  {
+    label: '开机',
+    icon: iconSuccessful()
+  },
+  {
+    label: '关机',
+    icon: iconCloseSquare()
+  },
+  {
+    label: '重启'
+  },
+  {
+    label: '网络设置',
+    children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+  }
+])
+
+const options1 = ref([
+  {
+    label: '远程登陆'
+  },
+  {
+    label: '开机'
+  },
+  {
+    label: '关机'
+  },
+  {
+    label: '重启'
+  },
+  {
+    label: '网络设置',
+    children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+  }
+])
+
+const tinyIconEllipsis = iconEllipsis()
+</script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+  margin-top: 30px;
+}
+</style>

package/demos/pc/app/action-menu/icon.spec.ts

@@ -0,0 +1,38 @@
+import { test, expect } from '@playwright/test'
+
+test('只显示图标', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('action-menu#icon')
+
+  const wrap = page.locator('#icon')
+  const actionMenu = wrap.locator('.tiny-action-menu').nth(0)
+  const actionMenuItem = actionMenu.locator('.tiny-action-menu__item')
+
+  await page.waitForTimeout(1500)
+  await expect(actionMenuItem.nth(0).locator('.tiny-svg')).toBeVisible()
+  await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger  .tiny-svg')).toBeVisible()
+  await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg')).toHaveCSS('width', '20px')
+  await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg')).toHaveCSS('height', '20px')
+  await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg')).toHaveCSS('margin', '2px')
+  await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-dropdown__title')).toBeHidden()
+
+  await actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg').hover()
+  await expect(page.locator('body > .tiny-dropdown-menu')).toBeVisible()
+})
+
+test('只显示文本', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('action-menu#icon')
+
+  const wrap = page.locator('#icon')
+  const actionMenu = wrap.locator('.tiny-action-menu').nth(1)
+  const actionMenuItem = actionMenu.locator('.tiny-action-menu__item')
+
+  await expect(actionMenuItem.nth(0).locator('.tiny-svg')).toBeHidden()
+  await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg')).toBeHidden()
+  await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__title')).toBeVisible()
+  await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__title')).toHaveText('更多')
+
+  await actionMenuItem.nth(3).hover()
+  await expect(page.locator('body > .tiny-dropdown-menu')).toBeVisible()
+})

package/demos/pc/app/action-menu/icon.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <p>场景1：只显示图标</p>
+    <tiny-action-menu
+      class="custom-icon"
+      :options="options"
+      :suffix-icon="tinyIconEllipsis"
+      more-text=""
+      spacing="12px"
+      :max-show-num="3"
+    >
+    </tiny-action-menu>
+    <p>场景2：只显示文本</p>
+    <tiny-action-menu :options="options1" :show-icon="false" :max-show-num="3"> </tiny-action-menu>
+  </div>
+</template>
+
+<script>
+import { ActionMenu } from '@opentiny/vue'
+import { iconWebPlus, iconSuccessful, iconCloseSquare, iconEllipsis } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyActionMenu: ActionMenu
+  },
+  data() {
+    return {
+      options: [
+        {
+          label: '远程登陆',
+          icon: iconWebPlus()
+        },
+        {
+          label: '开机',
+          icon: iconSuccessful()
+        },
+        {
+          label: '关机',
+          icon: iconCloseSquare()
+        },
+        {
+          label: '重启'
+        },
+        {
+          label: '网络设置',
+          children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+        }
+      ],
+      options1: [
+        {
+          label: '远程登陆'
+        },
+        {
+          label: '开机'
+        },
+        {
+          label: '关机'
+        },
+        {
+          label: '重启'
+        },
+        {
+          label: '网络设置',
+          children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+        }
+      ],
+      tinyIconEllipsis: iconEllipsis()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+  margin-top: 30px;
+}
+</style>

package/demos/pc/app/action-menu/popper-class.spec.ts

@@ -9,8 +9,9 @@ test('弹框样式', async ({ page }) => {
   const visibleItem = actionMenu.locator('.tiny-action-menu__item')
   const dropDownMenu = page.locator('body > .tiny-dropdown-menu.tiny-popper')
 
-  await page.waitForTimeout(300)
+  await page.waitForTimeout(1300)
   await visibleItem.last().hover()
+  await page.waitForTimeout(200)
   await expect(dropDownMenu).toHaveClass(/custom-action-menu/)
   await expect(dropDownMenu).toHaveCSS('background-color', 'rgb(250, 235, 215)')
 })

package/demos/pc/app/action-menu/webdoc/action-menu.cn.md

@@ -4,4 +4,4 @@ title: ActionMenu 菜单按钮
 
 # ActionMenu 菜单按钮
 
-> 提供一组操作按钮的组件，当按钮数量太多，自动将超出部分的按钮放置在一个下拉弹框中
+提供一组操作按钮的组件，当按钮数量太多，自动将超出部分的按钮放置在一个下拉弹框中。

package/demos/pc/app/action-menu/webdoc/action-menu.en.md

@@ -4,4 +4,4 @@ title: ActionMenu
 
 # ActionMenu
 
-> Provide a set of components for operating buttons. When there are too many buttons, the excess buttons will be automatically placed in a drop-down pop-up box
+Provide a set of components for operating buttons. When there are too many buttons, the excess buttons will be automatically placed in a drop-down pop-up box.

package/demos/pc/app/action-menu/webdoc/action-menu.js

@@ -21,6 +21,17 @@ export default {
       },
       'codeFiles': ['disabled.vue']
     },
+    {
+      'demoId': 'icon',
+      'name': { 'zh-CN': '图标', 'en-US': 'Icon' },
+      'desc': {
+        'zh-CN':
+          '通过 <code>icon</code> 属性设置菜单项的图标，<code>suffix-icon</code> 设置下拉触发源图标，<code>show-icon</code> 设置是否显示下拉触发源图标。',
+        'en-US':
+          'Set the icon of the attribute setting menu item through <code>icon</code>, set the drop-down trigger source icon through <code>suffix-icon</code>, and set whether to display the drop-down trigger source icon through <code>show-icon</code>.'
+      },
+      'codeFiles': ['icon.vue']
+    },
     {
       'demoId': 'text-field',
       'name': { 'zh-CN': '映射字段', 'en-US': 'Display Text' },
@@ -37,7 +48,7 @@ export default {
       'desc': {
         'zh-CN': '<p>通过 <code>more-text</code> 属性设置下拉按钮文本,默认为 <code>更多</code>。</p>',
         'en-US':
-          '<p>Set the dropdown button text through the <code>more-text</code> attribute, default to<code>More</code></p>'
+          '<p>Set the dropdown button text through the <code>more-text</code> attribute, default to <code>More</code></p>'
       },
       'codeFiles': ['more-text.vue']
     },
@@ -65,12 +76,21 @@ export default {
       'demoId': 'max-show-num',
       'name': { 'zh-CN': '个数限制', 'en-US': 'Number limit' },
       'desc': {
-        'zh-CN': '<p>通过 <code>max-show-num</code> 属性设置显示最多显示菜单按钮的个数，默认为 2。</p>',
+        'zh-CN': '<p>通过 <code>max-show-num</code> 属性设置最多显示菜单按钮的个数，默认为 2。</p>',
         'en-US':
           '<p>By setting the <code>max-show-num</code> attribute, the maximum number of displayed menu buttons is set to 2 by default.</p>'
       },
       'codeFiles': ['max-show-num.vue']
     },
+    {
+      'demoId': 'slot-item',
+      'name': { 'zh-CN': '菜单项插槽', 'en-US': 'Menu Slot' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>item</code> 插槽自定义下拉选项的 HTML 模板。</p>',
+        'en-US': '<p>Customize the HTML template for dropdown options through the <code>item</code> slot.</p>'
+      },
+      'codeFiles': ['slot-item.vue']
+    },
     {
       'demoId': 'events',
       'name': { 'zh-CN': '事件', 'en-US': 'Menu Item Click Event' },
@@ -92,22 +112,13 @@ export default {
           '</div>\n'
       },
       'codeFiles': ['events.vue']
-    },
-    {
-      'demoId': 'slot-item',
-      'name': { 'zh-CN': '菜单项插槽', 'en-US': 'Menu Slot' },
-      'desc': {
-        'zh-CN': '<p>通过 <code>item</code> 插槽自定义下拉选项的 HTML 模板。</p>',
-        'en-US': '<p>Customize the HTML template for dropdown options through the <code>item</code> slot.</p>'
-      },
-      'codeFiles': ['slot-item.vue']
     }
   ],
   apis: [
     {
       'name': 'action-menu',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'max-show-num',
           'type': 'number',
@@ -122,7 +133,7 @@ export default {
         {
           'name': 'more-text',
           'type': 'string',
-          'defaultValue': '更多',
+          'defaultValue': "'更多'",
           'desc': {
             'zh-CN': '下拉按钮文本',
             'en-US': 'Dropdown button text'
@@ -140,47 +151,6 @@ export default {
           },
           'demoId': 'basic-usage'
         },
-        {
-          'name': 'options.label',
-          'type': 'string',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN': '菜单项文本',
-            'en-US': 'Menu Item Text'
-          },
-          'demoId': 'basic-usage'
-        },
-        {
-          'name': 'options.children',
-          'type': 'IItemData[]',
-          'typeAnchorName': 'IItemData',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN': '菜单项的子集',
-            'en-US': 'Subset of menu items'
-          },
-          'demoId': 'basic-usage'
-        },
-        {
-          'name': 'options.divided',
-          'type': 'boolean',
-          'defaultValue': 'false',
-          'desc': {
-            'zh-CN': '是否显示分割线',
-            'en-US': 'Whether to display split lines'
-          },
-          'demoId': 'basic-usage'
-        },
-        {
-          'name': 'options.disabled',
-          'type': 'boolean',
-          'defaultValue': 'false',
-          'desc': {
-            'zh-CN': '是否禁用',
-            'en-US': 'Is it disabled'
-          },
-          'demoId': 'disabled'
-        },
         {
           'name': 'popper-class',
           'type': 'string',
@@ -194,17 +164,37 @@ export default {
         {
           'name': 'spacing',
           'type': 'string | number',
-          'defaultValue': '5px',
+          'defaultValue': "'5px'",
           'desc': {
             'zh-CN': '菜单按钮之间的间距',
             'en-US': 'Spacing between menu buttons'
           },
           'demoId': 'spacing'
         },
+        {
+          'name': 'suffix-icon',
+          'type': 'VueComponent',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '下拉触发源图标',
+            'en-US': 'Dropdown trigger source icon'
+          },
+          'demoId': 'icon'
+        },
+        {
+          'name': 'show-icon',
+          'type': 'boolean',
+          'defaultValue': 'true',
+          'desc': {
+            'zh-CN': '是否显示下拉触发源图标',
+            'en-US': 'Is the dropdown trigger source icon displayed'
+          },
+          'demoId': 'icon'
+        },
         {
           'name': 'text-field',
           'type': 'string',
-          'defaultValue': 'label',
+          'defaultValue': "'label'",
           'desc': {
             'zh-CN': '菜单按钮文本的键值',
             'en-US': 'Key values for menu button text'
@@ -268,7 +258,8 @@ interface IItemData {
   label: string           // 菜单项文本
   disabled: boolean       // 是否禁用
   divided: boolean        // 是否显示分割线
-  children: IItemData[] // 菜单项子集
+  children: IItemData[]   // 菜单项子集
+  icon: VueComponent      // 菜单项图标
 }
 `
     },