@opentiny/vue-docs 2.2.4 → 2.2.6

package/demos/pc/app/dialog-box/webdoc/dialog-box.js

@@ -5,7 +5,10 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过设置<code>:visible</code>属性控制弹窗显示。',
+        'en-US': 'Set pop-up display through<code>: visible</code>.'
+      },
       'codeFiles': ['basic-usage.vue']
     },
     {
@@ -13,9 +16,9 @@ export default {
       'name': { 'zh-CN': '二级弹窗', 'en-US': 'Level-2 pop-up window' },
       'desc': {
         'zh-CN':
-          '<p>通过 default 默认插槽和底部操作区按钮实现二级弹窗。设置 <code>append-to-body</code> 属性后，二级弹窗的实体 DOM 结构将追加到 body 元素上。</p>\n',
+          '<p>通过设置<code>#default</code>默认插槽和底部操作区按钮实现二级弹窗。设置 <code>append-to-body</code> 属性后，二级弹窗的实体<code>DOM</code>结构将追加到<code>body</code>元素上。</p>\n',
         'en-US':
-          '<p>The default slot and buttons in the operation area at the bottom are used to implement the level-2 pop-up window. After the <code>append-to-body</code> attribute is set, the entity DOM structure of the level-2 pop-up window is appended to the body element. </p>\n'
+          '<p>The <code>#default</code> slot and buttons in the operation area at the bottom are used to implement the level-2 pop-up window. After the <code>append-to-body</code> attribute is set, the entity <code>DOM</code> structure of the level-2 pop-up window is appended to the <code>body</code> element. </p>\n'
       },
       'codeFiles': ['secondary-dialog.vue']
     },
@@ -23,10 +26,9 @@ export default {
       'demoId': 'custom-dialog-title',
       'name': { 'zh-CN': '自定义标题', 'en-US': 'Custom Title' },
       'desc': {
-        'zh-CN':
-          '<p>除 <code>title</code> 属性可以设置弹窗标题外，还可以通过 <code>title</code> 插槽自定义弹窗标题区的内容。</p>\n',
+        'zh-CN': '<p>通过设置<code>title</code> 或者<code>#title</code>插槽设置弹窗标题内容。</p>\n',
         'en-US':
-          '<p>In addition to the <code>title</code> attribute, you can set the pop-up window title and customize the content in the pop-up window title area through the <code>title</code> slot. </p>\n'
+          '<p>Set the pop-up title content through the<code>title</code>attribute or <code>#title</code>slot.</p>\n'
       },
       'codeFiles': ['custom-dialog-title.vue']
     },
@@ -34,8 +36,9 @@ export default {
       'demoId': 'custom-dialog-content',
       'name': { 'zh-CN': '自定义内容', 'en-US': 'Custom Content' },
       'desc': {
-        'zh-CN': '<p>通过 default 默认插槽自定义弹窗主体部分的内容。</p>\n',
-        'en-US': '<p>The default slot is used to customize the content of the main part of the pop-up window. </p>\n'
+        'zh-CN': '<p>通过设置<code>#default</code>默认插槽自定义弹窗主体部分的内容。</p>\n',
+        'en-US':
+          '<p>The<code>#default</code>slot is used to customize the content of the main part of the pop-up window. </p>\n'
       },
       'codeFiles': ['custom-dialog-content.vue']
     },
@@ -43,7 +46,7 @@ export default {
       'demoId': 'custom-dialog-footer',
       'name': { 'zh-CN': '自定义底部', 'en-US': 'Custom bottom' },
       'desc': {
-        'zh-CN': '<p>通过 <code>footer</code> 插槽自定义弹窗底部操作区内容。</p>\n',
+        'zh-CN': '<p>通过设置<code>#footer</code> 插槽自定义弹窗底部操作区内容。</p>\n',
         'en-US':
           '<p>Customize the content in the operation area at the bottom of the pop-up window through the <code>footer</code> slot. </p>\n'
       },
@@ -54,9 +57,9 @@ export default {
       'name': { 'zh-CN': '隐藏关闭按钮', 'en-US': 'Hide the close button' },
       'desc': {
         'zh-CN':
-          '<p>默认弹窗右上角会显示关闭图标，单击可以关闭弹窗。若设置 <code>show-close</code> 为 false 后，将隐藏关闭图标，要实现关闭弹窗的功能可以通过底部操作区按钮的 click 事件切换 <code>visible</code> 属性的值为 false 。</p>\n',
+          '<p>通过设置<code>:show-close</code> 属性设置 <code>false</code>后，隐藏关闭图标，默认弹窗右上角显示关闭图标。底部<code>click</code>按钮事件可切换<code>visible</code>属性值设置弹窗显示。</p>\n',
         'en-US':
-          '<p>The close icon is displayed in the upper right corner of the default pop-up window. You can click this icon to close the pop-up window. If <code>show-close</code> is set to false, the close icon is hidden. To close the pop-up window, you can switch the value of <code>visible</code> to false by clicking the button in the operation area. </p>\n'
+          '<p>After setting the<code>:show-close</code>property to<code>false</code>, hide the close icon and the default pop-up window will display the close icon in the upper right corner. The bottom<code>click</code>button event can switch to<code>visible</code>property value setting pop-up display.</p>\n'
       },
       'codeFiles': ['hidden-close-buttons.vue']
     },
@@ -65,9 +68,9 @@ export default {
       'name': { 'zh-CN': '禁用 ESC 关闭', 'en-US': 'Disable ESC.' },
       'desc': {
         'zh-CN':
-          '<p>默认弹窗打开后，可以按下 Esc 键关闭弹窗，设置 <code>close-on-press-escape</code> 为 false 后将禁用该功能。</p>\n',
+          '<p>通过设置<code>:close-on-press-escape</code> 为<code>false</code>后可禁用按下<code>Esc</code>键关闭弹窗。</p>\n',
         'en-US':
-          '<p>After the default pop-up window is opened, you can press Esc to close the pop-up window. If <code>close-on-press-escape</code> is set to false, this function is disabled. </p>\n'
+          '<p>By setting<code>:close-on-pressure-scape</code>to<code>false</code>, pressing the<code>Esc</code>key can be disabled to close pop ups.</p>\n'
       },
       'codeFiles': ['close-on-press-escape.vue']
     },
@@ -75,9 +78,9 @@ export default {
       'demoId': 'dialog-top-height',
       'name': { 'zh-CN': '弹窗距离顶部的高度', 'en-US': 'Height between the pop-up window and the top' },
       'desc': {
-        'zh-CN': '<p>通过 <code>top</code> 属性指定弹窗距离窗口顶部的高度，默认为屏高的 15% 。</p>\n',
+        'zh-CN': '<p>通过设置<code>top</code>属性指定弹窗距离窗口顶部的高度，默认为屏高的 15% 。</p>\n',
         'en-US':
-          '<p>The <code>top</code> attribute specifies the height of the pop-up window from the top of the window. The default value is 15% of the screen height. </p>\n'
+          '<p>The<code>top</code>attribute specifies the height of the pop-up window from the top of the window. The default value is 15% of the screen height. </p>\n'
       },
       'codeFiles': ['dialog-top-height.vue']
     },
@@ -85,8 +88,8 @@ export default {
       'demoId': 'dialog-width',
       'name': { 'zh-CN': '弹窗的宽度', 'en-US': 'Wideness of the pop-up window' },
       'desc': {
-        'zh-CN': '<p>通过 <code>width</code> 属性指定弹窗的宽度。</p>\n',
-        'en-US': '<p>The <code>width</code> attribute specifies the width of the pop-up window. </p>\n'
+        'zh-CN': '<p>通过设置<code>width</code>属性指定弹窗的宽度。</p>\n',
+        'en-US': '<p>The<code>width</code>attribute specifies the width of the pop-up window. </p>\n'
       },
       'codeFiles': ['dialog-width.vue']
     },
@@ -95,9 +98,9 @@ export default {
       'name': { 'zh-CN': '点击遮罩时不关闭弹窗', 'en-US': 'The pop-up window is not closed when the mask is clicked.' },
       'desc': {
         'zh-CN':
-          '<p>默认弹窗打开后，可以单击遮罩层关闭弹窗，设置 <code>close-on-click-modal</code> 为 false 后将禁用该功能。</p>\n',
+          '<p>通过设置<code>:close-on-click-modal</code>属性为<code>false</code>后可禁用单击遮罩层关闭弹窗。</p>\n',
         'en-US':
-          '<p>After the default pop-up window is opened, you can click the mask layer to close the pop-up window. If <code>close-on-click-modal</code> is set to false, this function is disabled. </p>\n'
+          '<p>By setting the<code>:close-on-click-modal</code>property to<code>false</code>, clicking on the mask layer to close the pop-up window can be disabled.</p>\n'
       },
       'codeFiles': ['close-on-click-modal.vue']
     },
@@ -105,10 +108,8 @@ export default {
       'demoId': 'no-modal',
       'name': { 'zh-CN': '不启用遮罩层', 'en-US': 'Disable the mask layer' },
       'desc': {
-        'zh-CN':
-          '<p>默认弹窗打开时会显示遮罩层，设置 <code>modal</code> 为 false 后将不启用遮罩层。无遮罩层时，单击弹窗外部区域仍然可以关闭弹窗。</p>\n',
-        'en-US':
-          '<p>The mask layer is displayed when the pop-up window is opened by default. If <code>modal</code> is set to false, the mask layer is not enabled. If there is no mask layer, you can click the outer area of the pop-up window to close the pop-up window. </p>\n'
+        'zh-CN': '<p>通过设置<code>:modal</code>属性为<code>false</code>不启用遮罩层。</p>\n',
+        'en-US': '<p>Set the<code>:modal</code>attribute to<code>false</code>to not enable mask layers.</p>\n'
       },
       'codeFiles': ['no-modal.vue']
     },
@@ -117,9 +118,9 @@ export default {
       'name': { 'zh-CN': '右侧弹窗', 'en-US': 'Right pop-up window' },
       'desc': {
         'zh-CN':
-          '<p>设置 <code>right-slide</code> 属性为 true 后，弹窗将从窗口右侧弹出。\n设置 <code>modal-append-to-body</code> 属性默认为 true 遮罩层应用在 body 上。</p>\n',
+          '<p>通过设置<code>:right-slide</code>属性为<code>true</code>，弹窗将从窗口右侧弹出。<code>modal-append-to-body</code> 属性默认<code>true</code>遮罩层应用在<code>body</code>。</p>\n',
         'en-US':
-          '<p>After <code>right-slide</code> is set to true, a pop-up window is displayed from the right of the window. \nSet the <code>modal-append-to-body</code> attribute to true by default. The mask layer is applied to the body. </p>\n'
+          '<p>By setting the<code>:right-slide</code>attribute to<code>true</code>, a pop-up window will pop up from the right side of the window< Code>modal apply to body</code>Properties default to<code>true</code>Mask layer applied to<code>body</code></p>'
       },
       'codeFiles': ['right-dialog.vue']
     },
@@ -127,9 +128,8 @@ export default {
       'demoId': 'hidden-header',
       'name': { 'zh-CN': '隐藏标题区域', 'en-US': 'Hidden title area' },
       'desc': {
-        'zh-CN': '<p>弹窗默认有标题区域，设置 <code>show-header</code> 为 false 后，将隐藏标题区域。</p>\n',
-        'en-US':
-          '<p>The pop-up window has a title area by default. If <code>show-header</code> is set to false, the title area is hidden. </p>\n'
+        'zh-CN': '<p>通过设置<code>:show-header</code>为<code>false</code>，将隐藏标题区域。</p>\n',
+        'en-US': '<p>By using<code>:show-header</code>as<code>false</code>, the title area will be hidden.</p>\n'
       },
       'codeFiles': ['hidden-header.vue']
     },
@@ -138,9 +138,9 @@ export default {
       'name': { 'zh-CN': '弹出时禁用滚动', 'en-US': 'Disable scrolling when pop-up' },
       'desc': {
         'zh-CN':
-          '<p>弹窗弹出后，背景页面默认仍然是不可以滚动的。</p><p>通过设置 <code>lock-scroll: false</code>,遮罩后的内容可以滚动，body保持原来的滚动条,且鼠标移动和点击可以传递到遮罩层后的元素上。</p>\n',
+          '<p>通过设置<code>:lock-scroll</code>为<code>true</code>,允许滚动遮罩内容,禁止滚动背景内容，单击遮罩层可关闭弹窗。设置<code>:lock-scroll</code>为<code>false</code>,允许滚动遮罩内容、背景内容。</p>\n',
         'en-US':
-          '<p>After a pop-up window is displayed, the background page cannot be scrolled by default. </p><p>By setting <code>lock-scroll: false</code>, the masked content can be scrolled, and the body remains the original scroll bar, and mouse movements and clicks can be passed to the element behind the mask layer.</p>\n'
+          '<p>By setting<code>:lock-scroll</code>to<code>true</code>, allow scrolling of mask content and prohibit scrolling of background content,Click on the mask layer to close the pop-up window.Set<code>:lock-scroll</code>to<code>false</code>,allowing scrolling of mask content and background content.</p>\n'
       },
       'codeFiles': ['lock-scroll.vue']
     },
@@ -148,9 +148,9 @@ export default {
       'demoId': 'center',
       'name': { 'zh-CN': '头部和底部水平居中', 'en-US': 'The head and bottom are horizontally centered' },
       'desc': {
-        'zh-CN': '<p>头部标题默认显示在区域左侧，设置 <code>center</code> 为 true 后，将居中显示。</p>\n',
+        'zh-CN': '<p>通过设置<code>:center</code>属性为<code>true</code>头部标题居中显示。(默认显示在区域左侧)</p>\n',
         'en-US':
-          'The <p> header is displayed on the left of the area by default. If <code>center</code> is set to true, the header is displayed in the center. </p>\n'
+          '<p>By setting the<code>:center</code>attribute to<code>true</code>, the header title is displayed in the center. The default display is on the left side of the area.</p>\n'
       },
       'codeFiles': ['center.vue']
     },
@@ -159,9 +159,9 @@ export default {
       'name': { 'zh-CN': '可拖拽的弹窗', 'en-US': 'Dragable pop-up window' },
       'desc': {
         'zh-CN':
-          '<p>默认弹窗不可拖拽，设置 <code>draggable</code> 属性为 true 后，鼠标移入标题区域单击可拖拽，拖拽事件有 <code>@drag-start</code>、<code>drag-move</code>、<code>drag-end</code>。</p>\n',
+          '<p>通过设置<code>:draggable</code>属性为<code>true</code>，鼠标点击标题区域拖拽。具体事件：<code>@drag-start</code><code>@drag-move</code><code>@drag-end</code>。</p>\n',
         'en-US':
-          '<p> By default, the pop-up window cannot be dragged. Set <code>draggable</code> to true and move the cursor to the title area to drag the pop-up window. Drag events include <code>@drag-start</code>, <code>drag-move</code>, and <code>drag-end</code>. </p>\n'
+          '<p>By setting the<code>:draggable</code>attribute to<code>true</code>, click and drag in the title area with the mouse.Specific events:<code>@drag-start</code><code>@drag-move</code><code>@drag-end</code>.</p>\n'
       },
       'codeFiles': ['draggable.vue']
     },
@@ -169,10 +169,9 @@ export default {
       'demoId': 'fullscreen',
       'name': { 'zh-CN': '全屏弹窗', 'en-US': 'Full-screen pop-up window' },
       'desc': {
-        'zh-CN':
-          '<p>设置 <code>fullscreen</code> 属性为 true 可显示全屏弹窗，默认弹窗宽度是 500px，此时设置宽度是不生效的。</p>\n',
+        'zh-CN': '<p>通过设置<code>:fullscreen</code>属性为<code>true</code>显示全屏弹窗。</p>\n',
         'en-US':
-          '<p>Set <code>fullscreen</code> to true to display the full-screen pop-up window. The default pop-up window width is 500px. In this case, the width setting does not take effect. </p>\n'
+          '<p>Display full screen pop ups by setting the<code>:fullscreen</code>attribute to<code>true</code>.</p>\n'
       },
       'codeFiles': ['fullscreen.vue']
     },
@@ -181,9 +180,9 @@ export default {
       'name': { 'zh-CN': '弹出与关闭事件', 'en-US': 'Pop-up and Close Event' },
       'desc': {
         'zh-CN':
-          '<p><code>open</code> ：对话框打开时触发，<code>opened</code> ：对话框打开动画结束时触发，<code>close</code> ：对话框关闭时触发，<code>closed</code> ：对话框关闭动画结束时触发。</p>\n',
+          '<p>通过设置事件<code>@open</code>：对话框打开时触发<code>@opened</code>：对话框打开动画结束时触发<code>@close</code>：对话框关闭时触发<code>@closed</code>：对话框关闭动画结束时触发。</p>\n',
         'en-US':
-          '<p><code>open</code>: triggered when the dialog box is opened. <code>opened</code>: triggered when the animation ends. <code>close</code>: triggered when the dialog box is closed. <code>closed</code>: triggered when the animation ends. </p>\n'
+          '<p>By setting the event<code>@open</code>: triggered when the dialog box is opened<code>@opened</code>: triggered when the animation ends when the dialog box is opened<code>@close</code>: triggered when the dialog box is closed<code>@closed</code>: triggered when the animation ends when the dialog box is closed.</p>\n'
       },
       'codeFiles': ['open-close-events.vue']
     },
@@ -191,10 +190,9 @@ export default {
       'demoId': 'form-in-dialog',
       'name': { 'zh-CN': '弹窗表单', 'en-US': 'Pop-up Window Form' },
       'desc': {
-        'zh-CN':
-          '<p>通过 default 默认插槽实现嵌套表单以及表单提交的逻辑。</p>\n<p>默认关闭弹窗的时候重置表单，设置<code>is-form-reset</code> 为false,则关闭弹窗的时候不重置表格</p>',
+        'zh-CN': '<p>通过设置<code>:is-form-reset</code>属性为<code>false</code>,关闭弹窗不重置数据。</p>',
         'en-US':
-          '<p>The default slot is used to implement nested forms and form submission logic. </p>\n<p> By default, the form is reset when the pop-up window is closed. If <code>is-form-reset</code> is set to false, the form is not reset when the pop-up window is closed.</p>'
+          '<p>By setting the<code>:is-form-reset</code>attribute to <code>false</code>, close the pop-up window without resetting the data.</p>'
       },
       'codeFiles': ['form-in-dialog.vue']
     },
@@ -203,8 +201,9 @@ export default {
       'name': { 'zh-CN': '关闭时销毁主体元素', 'en-US': '' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>destroy-on-close</code> 控制是否在关闭时销毁 Dialog-box 对话框内的所有元素，默认值为 false。</p>',
-        'en-US': ''
+          '<p>通过设置<code>:destroy-on-close</code>属性为<code>true</code>在关闭弹窗时销毁<code>Dialog-box</code>对话框内的所有元素，默认值为<code>false</code>。</p>',
+        'en-US':
+          '<p>By setting the<code>:destroy-on-close</code>attribute to<code>true</code>, all elements in the<code>dialog box</code>dialog box are destroyed when the pop-up window is closed, with the default value being<code>false</code>.</p>'
       },
       'codeFiles': ['destroy-on-close.vue']
     }
@@ -213,141 +212,141 @@ export default {
     {
       'name': 'dialog-box',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'visible',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
+          'defaultValue': 'true',
           'desc': {
             'zh-CN': '控制弹出框显示与关闭',
-            'en-US':
-              'If this parameter is set to true, the header and bottom of the dialog box are automatically centered.'
+            'en-US': 'Control pop-up display and closing'
           },
           'demoId': 'basic-usage'
         },
         {
           'name': 'center',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
+          'defaultValue': 'false',
           'desc': {
             'zh-CN': '设置为 true 时 弹出框的头部与底部内容会自动居中',
-            'en-US': 'Close the pop-up window. The form data is reset by default.'
+            'en-US': 'When set to true, the head and bottom content of the pop-up box will automatically center'
           },
           'demoId': 'center'
         },
         {
           'name': 'is-form-reset',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
-          'desc': { 'zh-CN': '关闭弹窗，默认重置表单数据', 'en-US': 'Whether to display the close button' },
+          'defaultValue': 'true',
+          'desc': {
+            'zh-CN': '关闭弹窗，默认重置表单数据',
+            'en-US': 'Close the pop-up window and reset the form data by default'
+          },
           'demoId': 'form-in-dialog'
         },
         {
           'name': 'show-close',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
+          'defaultValue': 'true',
           'desc': {
             'zh-CN': '是否显示关闭按钮',
-            'en-US': 'Indicates whether to enable the drag function for pop-up windows. The default value is false.'
+            'en-US': 'Is the close button displayed'
           },
           'demoId': 'hidden-close-buttons'
         },
         {
           'name': 'draggable',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
+          'defaultValue': 'false',
           'desc': {
-            'zh-CN': '是否开启弹窗的拖拽功能，默认值为 false 。',
-            'en-US': 'Whether the dialog box is displayed in full screen mode'
+            'zh-CN': '是否开启弹窗的拖拽功能，默认值为 false',
+            'en-US': 'Whether to enable the drag and drop function of pop ups, with a default value of false'
           },
           'demoId': 'draggable'
         },
         {
           'name': 'fullscreen',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
-          'desc': { 'zh-CN': '弹出框是否全屏', 'en-US': 'Whether to enable the mask layer' },
+          'defaultValue': 'false',
+          'desc': { 'zh-CN': '弹出框是否全屏', 'en-US': 'Is the pop-up full screen' },
           'demoId': 'fullscreen'
         },
         {
           'name': 'modal',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
+          'defaultValue': 'true',
           'desc': {
             'zh-CN': '是否启用遮罩层',
-            'en-US':
-              'Indicates whether pop-up windows can be closed by clicking the mask layer. The default value is true. You can set modal-closable="false" on the tag. The pop-up windows cannot be closed by clicking the mask layer.'
+            'en-US': 'Is the mask layer enabled'
           },
           'demoId': 'no-modal'
         },
         {
           'name': 'close-on-click-modal',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
+          'defaultValue': 'true',
           'desc': {
-            'zh-CN':
-              '是否可以通过点击遮罩层关闭弹窗，默认为 true ,可以在标签上设置:modal-closable="false"不能通过点击遮罩层关闭弹窗。',
-            'en-US': 'Specifies whether the mask layer can be disabled by pressing ESC.'
+            'zh-CN': '是否可以通过点击遮罩层关闭弹窗',
+            'en-US': 'Close the pop-up window by clicking on the mask layer'
           },
           'demoId': 'close-on-click-modal'
         },
         {
           'name': 'close-on-press-escape',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
+          'defaultValue': 'true',
           'desc': {
             'zh-CN': '是否可以通过 ESC 键关闭遮罩层',
             'en-US':
-              'Indicates whether the mask layer is applied to the body. If the value is false, the mask layer is applied to the parent element of DialogBox.'
+              'Indicates whether the mask layer is applied to the body. If the value is false, the mask layer is applied to the parent element of DialogBox'
           },
           'demoId': 'close-on-press-escape'
         },
         {
           'name': 'modal-append-to-body',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
+          'defaultValue': 'true',
           'desc': {
             'zh-CN': '遮罩层是否应用到 body 上，为 false 时遮罩层会应用到 DialogBox 的父元素上',
             'en-US':
-              'Indicates whether the DialogBox itself is inserted into the body. This attribute must be specified and set to true for nested Dialogs.'
+              'Indicates whether the DialogBox itself is inserted into the body. This attribute must be specified and set to true for nested Dialogs'
           },
           'demoId': 'right-dialog'
         },
         {
           'name': 'append-to-body',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
+          'defaultValue': 'false',
           'desc': {
             'zh-CN': 'DialogBox 本身是否插入到 body 上，嵌套的 Dialog 必须指定该属性并赋值为 true',
-            'en-US': 'Indicates whether to enable the pop-up slide-out function. The default value is false.'
+            'en-US': 'Indicates whether to enable the pop-up slide-out function. The default value is false'
           },
           'demoId': 'secondary-dialog'
         },
         {
           'name': 'right-slide',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
+          'defaultValue': 'false',
           'desc': {
             'zh-CN': '是否开启弹出右侧滑出功能，默认值为 false 。',
-            'en-US': 'Whether to disable the scroll bar when a log is displayed.'
+            'en-US': 'Whether to disable the scroll bar when a log is displayed'
           },
           'demoId': 'right-dialog'
         },
         {
           'name': 'lock-scroll',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
+          'defaultValue': 'true',
           'desc': {
             'zh-CN': 'Dialog弹出时是否禁用滚动条',
-            'en-US': 'Indicates whether to display the pop-up header. The default value is true.'
+            'en-US': 'Indicates whether to display the pop-up header. The default value is true'
           },
           'demoId': 'lock-scroll'
         },
         {
           'name': 'show-header',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
-          'desc': { 'zh-CN': '是否显示弹窗头部 header，默认值为 true 。', 'en-US': 'Pop-up dialog box title.' },
+          'defaultValue': 'true',
+          'desc': { 'zh-CN': '是否显示弹窗头部 header，默认值为 true 。', 'en-US': 'Pop-up dialog box title' },
           'demoId': 'hidden-header'
         },
         {
@@ -357,25 +356,25 @@ export default {
           'desc': {
             'zh-CN': '弹出框标题。',
             'en-US':
-              'Height between the pop-up box and the top of the window. The default value is 15% of the screen height.'
+              'Height between the pop-up box and the top of the window. The default value is 15% of the screen height'
           },
           'demoId': 'custom-dialog-title'
         },
         {
           'name': 'top',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 15vh',
+          'defaultValue': '15vh',
           'desc': {
             'zh-CN': '设置弹出框距离窗口顶部的高度，默认为屏高的 15%',
-            'en-US': 'Display and close pop-up boxes.'
+            'en-US': 'Display and close pop-up boxes'
           },
           'demoId': 'dialog-top-height'
         },
         {
           'name': 'width',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 500px',
-          'desc': { 'zh-CN': '弹出框的宽度。', 'en-US': 'Wideness of the dialog box that is displayed.' },
+          'defaultValue': '500px',
+          'desc': { 'zh-CN': '弹出框的宽度。', 'en-US': 'Wideness of the dialog box that is displayed' },
           'demoId': 'dialog-width'
         },
         {

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

@@ -5,33 +5,36 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': { 'zh-CN': '通过引用组件标签即可。', 'en-US': 'You can refer to component label.' },
       'codeFiles': ['base.vue']
     },
     {
       'demoId': 'direction',
-      'name': { 'zh-CN': '垂直分隔线', 'en-US': '' },
+      'name': { 'zh-CN': '垂直分隔线', 'en-US': 'Vertical divider line' },
       'desc': {
         'zh-CN': '<p>通过 <code>direction</code> 属性可以设置分隔线的方向。</p>',
-        'en-US': ''
+        'en-US': '<p>The direction of the separator line can be set through the<code>direction</code>attribute.</p>'
       },
       'codeFiles': ['direction.vue']
     },
     {
       'demoId': 'content-position',
-      'name': { 'zh-CN': '分隔线文案的位置', 'en-US': '' },
+      'name': { 'zh-CN': '分隔线文案的位置', 'en-US': 'The position of the separator copy' },
       'desc': {
         'zh-CN': '<p>通过 <code>content-position</code> 属性 可以设置分隔线文案的位置。</p>',
-        'en-US': ''
+        'en-US':
+          '<p>The position of the separator text can be set through the<code>content position</code>attribute.</p>'
       },
       'codeFiles': ['contentPosition.vue']
     },
     {
       'demoId': 'custom-style',
-      'name': { 'zh-CN': '自定义分隔线样式', 'en-US': '' },
+      'name': { 'zh-CN': '自定义分隔线样式', 'en-US': 'Custom divider style' },
       'desc': {
-        'zh-CN': '<p>你可以自定义分割线样式。</p>',
-        'en-US': ''
+        'zh-CN':
+          '<p>通过<code>color</code><code>border-style</code><code>content-color</code>属性，自定义分割线样式。</p>',
+        'en-US':
+          '<p>Customize the split line style through the<code>color</code><code>border style</code><code>content color</code>attribute.</p>'
       },
       'codeFiles': ['customStyle.vue']
     }
@@ -40,7 +43,7 @@ export default {
     {
       'name': 'divider',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'color',
           'type': 'string',
@@ -51,32 +54,30 @@ export default {
         {
           'name': 'direction',
           'type': 'string',
-          'defaultValue': 'horizontal',
+          'defaultValue': `'horizontal'`,
           'desc': {
-            'zh-CN': '设置分隔线的方向，该属性的可选值为 horizontal / vertical 。',
-            'en-US':
-              'Set the direction of the divider; the possible values for this property are "horizontal" or "vertical".'
+            'zh-CN': '设置分隔线的方向，该属性的可选值为 horizontal / vertical',
+            'en-US': `Set the direction of the divider; the possible values for this property are "horizontal" or "vertical"`
           },
           'demoId': 'direction'
         },
         {
           'name': 'content-position',
           'type': 'string',
-          'defaultValue': 'center',
+          'defaultValue': `'center'`,
           'desc': {
-            'zh-CN': '设置分隔线文案的位置，该属性的可选值为 left / center / right 。',
-            'en-US':
-              'Set the position of the divider content; the possible values for this property are "left", "center", or "right".'
+            'zh-CN': '设置分隔线文案的位置，该属性的可选值为 left / center / right',
+            'en-US': `Set the position of the separator text, with optional values of left/center/right for this attribute`
           },
           'demoId': 'content-position'
         },
         {
           'name': 'border-style',
           'type': 'string',
-          'defaultValue': 'solid',
+          'defaultValue': `'solid'`,
           'desc': {
             'zh-CN': '设置分隔线的样式，该属性的可选值为 solid / dashed',
-            'en-US': 'Set the style of the divider; the possible values for this property are "solid" or "dashed".'
+            'en-US': 'Set the style of the separator line, with optional values of solid/dashed for this property'
           },
           'demoId': 'custom-style'
         },
@@ -84,14 +85,17 @@ export default {
           'name': 'content-color',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': '设置分隔线文案的颜色', 'en-US': 'Set the color of the divider content.' },
+          'desc': { 'zh-CN': '设置分隔线文案的颜色', 'en-US': 'Set the color of the divider content' },
           'demoId': 'custom-style'
         },
         {
           'name': 'content-background-color',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': '设置分割线文案的背景颜色', 'en-US': 'Set the background color of the divider content.' },
+          'desc': {
+            'zh-CN': '设置分割线文案的背景颜色',
+            'en-US': 'Set the background color of the divider content'
+          },
           'demoId': 'custom-style'
         }
       ],

package/demos/pc/app/dropdown/events-composition-api.vue

@@ -19,7 +19,7 @@
     </tiny-dropdown>
 
     <p>场景2：配置式</p>
-    <tiny-dropdown @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
+    <tiny-dropdown class="options-event" @item-click="itemClick" @visible-change="visibleChange">
       <template #dropdown>
         <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
       </template>

package/demos/pc/app/dropdown/events.spec.ts

@@ -35,6 +35,7 @@ test('配置式内置事件', async ({ page }) => {
   const wrap = page.locator('#events')
   const notify = page.locator('.tiny-notify')
   const dropDown = wrap.locator('.tiny-dropdown').nth(1)
+
   await expect(dropDown).toHaveClass(/options-event/)
   const dropDownMenuItem = page.locator('body > .tiny-dropdown-menu > .tiny-dropdown-item')
 

package/demos/pc/app/dropdown/multi-level-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <p>场景1：使用 menu-options 属性定义 children</p>
-    <tiny-dropdown :menu-options="menuOptions"></tiny-dropdown>
+    <tiny-dropdown :menu-options="menuOptions" @item-click="itemClick"></tiny-dropdown>
     <p>场景2：使用 options 属性定义 children</p>
     <tiny-dropdown @item-click="itemClick">
       <template #dropdown>
@@ -14,7 +14,7 @@
 <script setup>
 import { reactive } from 'vue'
 import { iconStarDisable } from '@opentiny/vue-icon'
-import { Dropdown as TinyDropdown, DropdownMenu as TinyDropdownMenu, Notify } from '@opentiny/vue'
+import { Dropdown as TinyDropdown, DropdownMenu as TinyDropdownMenu, Modal } from '@opentiny/vue'
 
 const options = reactive([
   {
@@ -66,12 +66,8 @@ const menuOptions = reactive({
 })
 
 const itemClick = (data) => {
-  Notify({
-    type: 'info',
-    title: 'itemData',
-    message: `配置式可以通过 data.itemData 获取配置数据：${JSON.stringify(data.itemData)}`,
-    position: 'top-right',
-    duration: 2000
+  Modal.message({
+    message: `配置式可以通过 data.itemData 获取配置数据：${JSON.stringify(data.itemData)}`
   })
 }
 </script>