@opentiny/vue-docs 2.1.10 → 2.2.0

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

@@ -9,7 +9,7 @@ export default {
         'zh-CN':
           '<p>通过 <code>v-model</code> 设置被选中的 <code>tiny-option</code> 的 <code>value</code> 属性值。</p>\n',
         'en-US':
-          '<p>Set the<code>value</code>attribute value of the selected<code>tiny option</code>by<code>v-model</code>.</p>\n'
+          '<p>Set the <code>value</code> attribute value of the selected <code>tiny-option</code> by <code>v-model</code>.</p>\n'
       },
       'codeFiles': ['basic-usage.vue']
     },
@@ -20,7 +20,7 @@ export default {
         'zh-CN':
           '<p>通过 <code>multiple</code> 属性启用多选功能，此时 <code>v-model</code> 的值为当前选中值所组成的数组。默认选中值会以标签（Tag 组件）展示。</p>\n',
         '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>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'
       },
       'codeFiles': ['multiple.vue']
     },
@@ -30,7 +30,7 @@ export default {
       'desc': {
         'zh-CN': '<p>通过 <code>multiple-limit</code> 属性限制最多可选择的个数，默认为 0 不限制。</p>\n',
         'en-US':
-          '<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>Limit the maximum number of choices through the <code>multiple-limit</code> attribute, with a default value of 0 and no limit.</p>\n'
       },
       'codeFiles': ['multiple-limit.vue']
     },
@@ -40,7 +40,7 @@ export default {
       'desc': {
         'zh-CN': '<p>通过 <code>collapse-tags</code> 属性设置选中多个选项时，多个标签缩略展示。</p>\n',
         'en-US':
-          '<p>When multiple options are selected through the<code>collapse tags</code>attribute settings, multiple tags will be abbreviated and displayed.</p>\n'
+          '<p>When multiple options are selected through the <code>collapse-tags</code> attribute settings, multiple tags will be abbreviated and displayed.</p>\n'
       },
       'codeFiles': ['collapse-tags.vue']
     },
@@ -49,9 +49,9 @@ export default {
       'name': { 'zh-CN': '标签类型', 'en-US': 'Tag type' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>tagType</code> 属性设置标签类型，同 Tag 组件的 type 属性。可选值：success / info / warning / danger 。</p>\n',
+          '<p>通过 <code>tag-type</code> 属性设置标签类型，同 Tag 组件的 type 属性。可选值：success / info / warning / danger 。</p>\n',
         'en-US':
-          '<p>Set the label type through the<code>tagType</code>attribute, which is the same as the type attribute of the Tag component. Optional values: success/info/warning/danger.</p>\n'
+          '<p>Set the label type through the <code>tag-type</code> attribute, which is the same as the type attribute of the Tag component. Optional values: success/info/warning/danger.</p>\n'
       },
       'codeFiles': ['tag-type.vue']
     },
@@ -61,7 +61,7 @@ export default {
       'desc': {
         'zh-CN': '<p>通过 <code>size</code> 属性设置输入框尺寸，可选值：medium / small / mini 。</p>',
         'en-US':
-          '<p>Set the input box size through the<code>size</code>attribute, with optional values of medium / small / mini.</p>'
+          '<p>Set the input box size through the <code>size</code> attribute, with optional values of medium / small / mini.</p>'
       },
       'codeFiles': ['size.vue']
     },
@@ -71,7 +71,7 @@ export default {
       'desc': {
         'zh-CN': '<p>通过 <code>disabled</code> 属性设置下拉或者下拉项的禁用状态。</p>\n',
         'en-US':
-          '<p>Set the disabled status of the dropdown or dropdown item through the<code>disabled</code>attribute. </p>\n'
+          '<p>Set the disabled status of the dropdown or dropdown item through the <code>disabled</code> attribute. </p>\n'
       },
       'codeFiles': ['disabled.vue']
     },
@@ -81,7 +81,7 @@ export default {
       'desc': {
         'zh-CN': '<p>通过 <code>clearable</code> 属性启用一键清除选中值的功能。仅适用于单选。</p>\n',
         'en-US':
-          '<p>Enable the function of clearing selected values with one click through the<code>clearable</code>attribute. Only applicable for single selection.</p>\n'
+          '<p>Enable the function of clearing selected values with one click through the<code>clearable</code> attribute. Only applicable for single selection.</p>\n'
       },
       'codeFiles': ['clearable.vue']
     },
@@ -92,7 +92,7 @@ export default {
         'zh-CN':
           '<p>通过 <code>filterable</code> 属性启用搜索功能。<code>filter-method</code> 自定义过滤方法。 <code>no-match-text</code> 属性自定义与搜索条件无匹配项时显示的文字。</p>\n',
         'en-US':
-          '<p>Enable search functionality through the<code>filterable</code>attribute< Code>filter method</code>Customize the filtering method< Code>no match text</code>The text displayed when there is no match between attribute customization and search criteria.</p>\n'
+          '<p>Enable search functionality through the <code>filterable</code> attribute <code>filter-method</code> customize the filtering method <code>no-match-text</code> the text displayed when there is no match between attribute customization and search criteria.</p>\n'
       },
       'codeFiles': ['filter-method.vue']
     },
@@ -103,7 +103,7 @@ export default {
         'zh-CN':
           '<p>通过 <code>filterable</code> 和 <code>remote</code> 和 <code>remote-method</code> 这三个属性同时使用设置远程搜索。通过 <code>reserve-keyword</code> 属性设置多选可搜索时，可以在选中一个选项后保留当前的搜索关键词。</p>\n',
         'en-US':
-          '<p>Set remote search through the use of three attributes:<code>filterable</code>,<code>remote</code>, and<code>remote method</code>. When setting multiple searchable options through the<code>reserve keyword</code>attribute, the current search keyword can be retained after selecting an option.</p>'
+          '<p>Set remote search through the use of three attributes:<code>filterable</code>,<code>remote</code>, and <code>remote-method</code>. When setting multiple searchable options through the <code>reserve-keyword</code> attribute, the current search keyword can be retained after selecting an option.</p>'
       },
       'codeFiles': ['remote-method.vue']
     },
@@ -113,7 +113,7 @@ export default {
       'desc': {
         'zh-CN': '<p>通过 <code>searchable</code> 属性设置下拉面板显示搜索框，默认不显示。</p>\n',
         'en-US':
-          '<p>The search box is displayed through the<code>searchable</code>attribute setting drop-down panel, which is not displayed by default. </p>\n'
+          '<p>The search box is displayed through the <code>searchable</code> attribute setting drop-down panel, which is not displayed by default. </p>\n'
       },
       'codeFiles': ['searchable.vue']
     },
@@ -124,7 +124,7 @@ export default {
         'zh-CN':
           '<p>通过 <code>allow-create</code> 和 <code>filterable</code> 属性，设置当搜索字段不在已有选项中时，可创建为新的条目。结合 <code>default-first-option</code> 属性，可以按 Enter 键选中第一个匹配项。</p>\n',
         'en-US':
-          '<p>By using the<code>allow create</code>and<code>filterable</code>attributes, the search field can be created as a new entry when it is not in an existing option. By combining the<code>default-first-option</code>attribute, you can press the Enter key to select the first matching option.</p>\n'
+          '<p>By using the <code>allow-create</code> and <code>filterable</code> attributes, the search field can be created as a new entry when it is not in an existing option. By combining the <code>default-first-option</code> attribute, you can press the Enter key to select the first matching option.</p>\n'
       },
       'codeFiles': ['allow-create.vue']
     },
@@ -134,7 +134,7 @@ export default {
       'desc': {
         'zh-CN': '通过 <code>text-field</code> 设置显示文本字段，<code>value-field</code>设置绑定值字段。',
         'en-US':
-          '<p>Set the display text field by<code>text field</code>, and set the binding value field by<code>value field</code>. </p>\n'
+          '<p>Set the display text field by <code>text-field</code>, and set the binding value field by <code>value-field</code>. </p>\n'
       },
       'codeFiles': ['map-field.vue']
     },
@@ -145,7 +145,7 @@ export default {
         'zh-CN':
           '<p>通过 <code>popper-class</code> 属性设置下拉弹框的类名，可自定义样式。<code>placement</code>设置弹出位置。<code>popper-append-to-body</code> 设置是否将弹框 dom 元素插入至 body 元素，默认为 true。</p>\n',
         'en-US':
-          '<p>You can customize the style by setting the class name of the dropdown pop-up box through the<code>popper class</code>attribute< Code>placement</code>Set the pop-up position< Code>popper append to body</code>Set whether to insert the pop-up dom element into the body element, default to true. </p>\n'
+          '<p>You can customize the style by setting the class name of the dropdown pop-up box through the <code>popper-class</code> attribute <code>placement</code> set the pop-up position <code>popper-append-to-body</code> set whether to insert the pop-up dom element into the body element, default to true. </p>\n'
       },
       'codeFiles': ['popup-style-position.vue']
     },
@@ -155,7 +155,7 @@ export default {
       'desc': {
         'zh-CN': '<p>通过 <code>input-box-type</code> 属性设置输入框类型。可选值：input / underline。</p>\n',
         'en-US':
-          'The <p>Set the input box type through the<code>input box type</code>attribute. Optional values: input / underline. </p>\n'
+          'The <p>Set the input box type through the <code>input-box-type</code> attribute. Optional values: input / underline. </p>\n'
       },
       'codeFiles': ['input-box-type.vue']
     },
@@ -165,7 +165,7 @@ export default {
       'desc': {
         'zh-CN': '<p>通过 <code>show-alloption</code> 属性设置多选时不展示 <code>全选</code> 选项，默认展示 。</p>\n',
         'en-US':
-          '<p>By setting the<code>show allocation</code>attribute, do not display the<code>select all</code>option when multiple selections are made, and display by default.</p>\n'
+          '<p>By setting the <code>show-allocation</code> attribute, do not display the <code>select all</code> option when multiple selections are made, and display by default.</p>\n'
       },
       'codeFiles': ['show-alloption.vue']
     },
@@ -174,20 +174,20 @@ export default {
       'name': { 'zh-CN': '自动清除不匹配的值', 'en-US': 'Clear mismatch value' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>clearNoMatchValue</code> 属性设置 v-model 的值在 options 中无法找到匹配项的值会被自动清除，默认不清除。 </p>\n',
+          '<p>通过 <code>clear-no-match-value</code> 属性设置 v-model 的值在 options 中无法找到匹配项的值会被自动清除，默认不清除。 </p>\n',
         'en-US':
-          '<p>By setting the value of the v-model through the<code>clearNoMatchValue</code>attribute, if a matching value cannot be found in the options, it will be automatically cleared and will not be cleared by default.</p>\n'
+          '<p>By setting the value of the v-model through the <code>clear-no-match-value</code>attribute, if a matching value cannot be found in the options, it will be automatically cleared and will not be cleared by default.</p>\n'
       },
       'codeFiles': ['clear-no-match-value.vue']
     },
     {
       'demoId': 'optimization',
-      'name': { 'zh-CN': '大数据虚拟滚动', 'en-US': 'Big data virtual scrolling' },
+      'name': { 'zh-CN': '虚拟滚动', 'en-US': 'Virtual scrolling' },
       'desc': {
         'zh-CN':
           '<p>通过 <code>optimization</code> 开启大数据虚拟滚动功能。仅配置式（使用 options 属性）时支持。\n多选模式下，最大选中项数 <code>multiple-limit</code> 默认值为 20，如果选中项比较多，建议开启 <code>collapse-tags</code> 进行折叠显示。</p>\n',
         'en-US':
-          '<p>Enable the big data virtual scrolling function through<code>optimization</code>. Supported only when configuring (using the options attribute). In n multiple selection mode, the maximum number of selected items is<code>multiple limit</code>with a default value of 20. If there are many selected items, it is recommended to turn on<code>collapse tags</code>for collapsed display. </p>\n'
+          '<p>Enable the big data virtual scrolling function through <code>optimization</code>. Supported only when configuring (using the options attribute). In n multiple selection mode, the maximum number of selected items is <code>multiple-limit</code> with a default value of 20. If there are many selected items, it is recommended to turn on <code>collapse-tags</code> for collapsed display. </p>\n'
       },
       'codeFiles': ['optimization.vue']
     },
@@ -198,30 +198,30 @@ export default {
         'zh-CN':
           '<p>使用 <code>tiny-option-group</code> 组件对备选项进行分组。通过 <code>label</code> 属性设置分组名，code>disabled</code> 属性设置该分组下所有选项为禁用。</p>\n',
         'en-US':
-          '<p>Use the<code>tiny option group</code>component to group alternative options. Set the group name through the<code>label</code>attribute, and set all options under the group to disabled through the code>disabled</code>attribute. </p>\n'
+          '<p>Use the <code>tiny-option-group</code> component to group alternative options. Set the group name through the <code>label</code> attribute, and set all options under the group to disabled through the <code>disabled</code> attribute. </p>\n'
       },
       'codeFiles': ['option-group.vue']
     },
     {
-      'demoId': 'search-allow-copy',
+      'demoId': 'copy-single',
       'name': { 'zh-CN': '单选可复制', 'en-US': 'Single choice replicable' },
       'desc': {
         'zh-CN': '<p>通过 <code>allow-copy</code> 属性设置单选可搜索时，鼠标可滑动选中并复制输入框的内容。</p>\n',
         'en-US':
-          '<p>When setting radio searchable through the<code>allow copy</code>attribute, the mouse can slide to select and copy the content of the input box. </p>\n'
+          '<p>When setting radio searchable through the <code>allow-copy</code> attribute, the mouse can slide to select and copy the content of the input box. </p>\n'
       },
-      'codeFiles': ['search-allow-copy.vue']
+      'codeFiles': ['copy-single.vue']
     },
     {
-      'demoId': 'tag-select',
+      'demoId': 'copy-multi',
       'name': { 'zh-CN': '多选可复制', 'en-US': 'Multiple choices can be copied' },
       'desc': {
         'zh-CN':
           '<p>通过 <code>tag-selectable</code> 属性设置输入框中标签可通过鼠标选择，然后按 Ctrl + C 或右键进行复制。<code>copyable</code> 属性设置启用一键复制所有标签的文本内容并以逗号分隔。</p>\n',
         'en-US':
-          '<p>By setting the<code>tag selectable</code>attribute in the input box, the label can be selected with the mouse, and then copied by pressing Ctrl+C or right-click< Code>copyable</code>Property settings enable one click copying of all label text content separated by commas.</p>\n'
+          '<p>By setting the <code>tag-selectable</code> attribute in the input box, the label can be selected with the mouse, and then copied by pressing Ctrl+C or right-click <code>copyable</code> attribute settings enable one click copying of all label text content separated by commas.</p>\n'
       },
-      'codeFiles': ['tag-select.vue']
+      'codeFiles': ['copy-multi.vue']
     },
     {
       'demoId': 'native-properties',
@@ -230,7 +230,7 @@ export default {
         'zh-CN':
           '<p>通过 <code>name</code> / <code>placeholder</code> / <code>autocomplete</code> 属性设置下拉组件内置 Input 的原生属性。</p>\n',
         'en-US':
-          '<p>Set the native properties of the built-in Input in the dropdown component through the<code>name</code>/<code>placeholder</code>/<code>autocomplete</code>attribute settings.</p>\n'
+          '<p>Set the native properties of the built-in Input in the dropdown component through the <code>name</code> / <code>placeholder</code> / <code>autocomplete</code> attribute settings.</p>\n'
       },
       'codeFiles': ['native-properties.vue']
     },
@@ -240,7 +240,7 @@ export default {
       'desc': {
         'zh-CN': '<p>通过 <code>value-key</code> 属性设置 value 唯一标识的键名，绑定值可以设置为对象。</p>\n',
         'en-US':
-          '<p>By using the<code>value key</code>attribute to set the key name uniquely identified by value, the binding value can be set as an object. </p>\n'
+          '<p>By using the <code>value-key</code> attribute to set the key name uniquely identified by value, the binding value can be set as an object. </p>\n'
       },
       'codeFiles': ['binding-obj.vue']
     },
@@ -251,7 +251,7 @@ export default {
         'zh-CN':
           '<p>通过 <code>no-data-text</code> 属性设置选项为空时显示的文本，<code>show-empty-image</code> 属性设置是否显示空数据图片，默认不显示。</p>\n',
         'en-US':
-          '<p>By setting the<code>no data text</code>attribute to display text when the option is empty, and by setting the<code>show empty image</code>attribute to display empty data images, it is not displayed by default.</p>\n'
+          '<p>By setting the<code>no-data-text</code> attribute to display text when the option is empty, and by setting the <code>show-empty-image</code> attribute to display empty data images, it is not displayed by default.</p>\n'
       },
       'codeFiles': ['no-data-text.vue']
     },
@@ -261,7 +261,7 @@ export default {
       'desc': {
         'zh-CN': '<p>通过 <code>focus()</code> 方法聚焦，<code>blur()</code>方法失焦。</p>\n',
         'en-US':
-          '<p>Focusing is achieved through the<code>focus()</code>method, while the<code>blur()</code>method is out of focus. </p>\n'
+          '<p>Focusing is achieved through the <code>focus()</code> method, while the <code>blur()</code> method is out of focus. </p>\n'
       },
       'codeFiles': ['manual-focus-blur.vue']
     },
@@ -271,7 +271,7 @@ export default {
       'desc': {
         'zh-CN': '<p>通过 <code>automatic-dropdown</code> 设置不可搜索的 select 获得焦点并自动弹出选项菜单。</p>\n',
         'en-US':
-          '<p>Set non searchable select to obtain focus and automatically pop up an option menu through<code>automatic dropdown</code>. </p>\n'
+          '<p>Set non searchable select to obtain focus and automatically pop up an option menu through <code>automatic-dropdown</code>. </p>\n'
       },
       'codeFiles': ['automatic-dropdown.vue']
     },
@@ -282,7 +282,7 @@ export default {
         'zh-CN':
           '<p>通过 <code>is-drop-inherit-width</code> 属性设置下拉弹框的宽度是否跟输入框保持一致。默认超出输入框宽度时由内容撑开。</p>\n',
         'en-US':
-          '<p>Set whether the width of the dropdown pop-up box is consistent with the input box through the<code>is drop-in width</code>attribute. By default, when the width of the input box is exceeded, it is supported by the content. </p>\n'
+          '<p>Set whether the width of the dropdown pop-up box is consistent with the input box through the <code>is-drop-inherit-width</code> attribute. By default, when the width of the input box is exceeded, it is supported by the content. </p>\n'
       },
       'codeFiles': ['is-drop-inherit-width.vue']
     },
@@ -291,7 +291,7 @@ export default {
       'name': { 'zh-CN': '隐藏下拉', 'en-US': 'Hide drop' },
       'desc': {
         'zh-CN': '<p>通过 <code>hide-drop</code> 属性设置下拉列表不显示。</p>\n',
-        'en-US': '<p>Set the drop-down list to not display through the<code>hide drop</code>attribute.</p>'
+        'en-US': '<p>Set the drop-down list to not display through the <code>hide-drop</code> attribute.</p>'
       },
       'codeFiles': ['hide-drop.vue']
     },
@@ -300,7 +300,7 @@ export default {
       'name': { 'zh-CN': '自动缓存', 'en-US': 'Automatic caching' },
       'desc': {
         'zh-CN': '<p>通过 <code>cache-op</code> 开启缓存功能，仅配置式生效。</p>\n',
-        'en-US': '<p>Enable cache function through<code>cache op</code>, only configuration mode takes effect</p>'
+        'en-US': '<p>Enable cache function through <code>cache-op</code>, only configuration mode takes effect</p>'
       },
       'codeFiles': ['cache-usage.vue']
     },
@@ -319,7 +319,7 @@ export default {
       'desc': {
         'zh-CN': '<p>通过 <code>render-type</code> 设置渲染为树类型，<code>tree-op</code> 设置树组件配置。</p>',
         'en-US':
-          '<p>Set the rendering to tree type through<code>render type</code>, and set the tree component configuration through<code>tree op</code>. </p>\n'
+          '<p>Set the rendering to tree type through <code>render-type</code>, and set the tree component configuration through <code>tree-op</code>. </p>\n'
       },
       'codeFiles': ['nest-tree.vue']
     },
@@ -329,7 +329,7 @@ export default {
       'desc': {
         'zh-CN': '<p>通过 <code>render-type</code> 设置渲染为表格类型，<code>grid-op</code>设置表格配置。</p>',
         'en-US':
-          '<p>Set the rendering to a table type through<code>render type</code>, and set the table configuration through<code>grid op</code></p>\n'
+          '<p>Set the rendering to a table type through <code>render-type</code>, and set the table configuration through <code>grid-op</code></p>\n'
       },
       'codeFiles': ['nest-grid.vue']
     },
@@ -340,31 +340,31 @@ export default {
         'zh-CN':
           '<p>通过 <code>select-config</code> （多选）或 <code>radio-config</code> （单选）属性的<code>checkMethod</code>自定义禁用逻辑，返回 true(启用) / false(禁用)。</p>\n',
         'en-US':
-          "<p>By customizing the disable logic through the<code>select-config</code>(multiple selection) or<code>radio-config</code>(single selection) attribute's<code>checkMethod</code>, return true(Enable) / false(disable)</p>"
+          "<p>By customizing the disable logic through the <code>select-config</code> (multiple selection) or <code>radio-config</code> (single selection) attribute's<code>checkMethod</code>, return true(Enable) / false(disable)</p>"
       },
       'codeFiles': ['nest-grid-disable.vue']
     },
     {
-      'demoId': 'nest-remote-grid',
+      'demoId': 'nest-grid-remote-single',
       'name': { 'zh-CN': '下拉表格远程搜索(单选)', 'en-US': 'Select table Remote Search (Single)' },
       'desc': {
         'zh-CN':
           '<p>通过 <code>remote</code> 和 <code>remote-method</code> 和 <code>filterable</code> 开启远程搜索。通过 <code>remote-config</code> 设置自动搜索和显示展开按钮 。</p>\n',
         'en-US':
-          '<p>Enable remote search through<code>remote</code>,<code>remote-method</code>, and<code>filterable</code>. Set up automatic search and display expansion buttons through<code>remote-config</code>.</p>'
+          '<p>Enable remote search through <code>remote</code>,<code>remote-method</code>, and <code>filterable</code>. Set up automatic search and display expansion buttons through <code>remote-config</code>.</p>'
       },
-      'codeFiles': ['nest-remote-grid.vue']
+      'codeFiles': ['nest-grid-remote-single.vue']
     },
     {
-      'demoId': 'nest-grid-remote-filter',
+      'demoId': 'nest-grid-remote-multi',
       'name': { 'zh-CN': '下拉表格远程搜索(多选）', 'en-US': 'Select table Remote Search (Multiple)' },
       'desc': {
         'zh-CN':
           '<p>通过 <code>remote</code> 和 <code>remote-method</code> 和 <code>filterable</code> 开启远程搜索。通过 <code>remote-config</code> 设置自动搜索和显示展开按钮。<code>reserve-keyword</code>设置多选选中一个选项后依然保留搜索关键字。</p>\n',
         'en-US':
-          '<p>Enable remote search through<code>remote</code>,<code>remote-method</code>, and<code>filterable</code>. Set up automatic search and display expansion buttons through<code>remote-config</code><code>reserve-keyword</code>Set to retain search keywords after selecting multiple options.</p>'
+          '<p>Enable remote search through <code>remote</code>,<code>remote-method</code>, and <code>filterable</code>. Set up automatic search and display expansion buttons through <code>remote-config</code> <code>reserve-keyword</code> set to retain search keywords after selecting multiple options.</p>'
       },
-      'codeFiles': ['nest-grid-remote-filter.vue']
+      'codeFiles': ['nest-grid-remote-multi.vue']
     },
     {
       'demoId': 'nest-radio-grid-much-data',
@@ -376,39 +376,12 @@ export default {
       },
       'codeFiles': ['nest-radio-grid-much-data.vue']
     },
-    {
-      'demoId': 'events',
-      'name': { 'zh-CN': '事件', 'en-US': 'Events' },
-      'desc': {
-        'zh-CN':
-          '<div class="tip custom-block">' +
-          '<p class="custom-block-title">事件说明</p>\n' +
-          '<p>change：监听 v-model 的值发生变化。</p>\n' +
-          '<p>clear：监听单选时，点击清空按钮。</p>\n' +
-          '<p>blur：监听 input 失去焦点。</p>\n' +
-          '<p>focus：监听 input 获得焦点。</p>\n' +
-          '<p>visible-change：监听下拉框可见状态的变化。</p>\n' +
-          '<p>remove-tag：监听多选移除选中的标签。</p>\n' +
-          '</div>\n',
-        'en-US':
-          '<div class="tip custom-block">' +
-          '<p class="custom-block-title"> Event Description</p>\n' +
-          '<p>change：Listen for changes in the value of the v-model.</p>' +
-          '<p>clear：When listening to radio selection, click the clear button.</p>\n' +
-          '<p>blur：Listening to input losing focus.</p>\n' +
-          '<p>focus：Listening for input to gain focus.</p>\n' +
-          '<p>visible-change: Listen for changes in the visible status of the dropdown box</p>\n' +
-          '<p>remove-tag：Listen for multiple selections to remove selected tags.</p>\n' +
-          '</div>\n'
-      },
-      'codeFiles': ['events.vue']
-    },
     {
       'demoId': 'slot-default',
       'name': { 'zh-CN': '选项插槽', 'en-US': 'Option slot' },
       'desc': {
         'zh-CN': '<p>通过 tiny-option 的 <code>default</code> 插槽自定义选项的 HTML 模板。</p>\n',
-        'en-US': '<p>HTML template for customizing options through the<code>default</code>slot of tiny-option.</p>'
+        'en-US': '<p>HTML template for customizing options through the <code>default</code> slot of tiny-option.</p>'
       },
       'codeFiles': ['slot-default.vue']
     },
@@ -418,7 +391,7 @@ export default {
       'desc': {
         'zh-CN': '<p>通过 <code>footer</code> 插槽自定义下拉弹框底部的 HTML 模板。</p>\n',
         'en-US':
-          '<p>Customize the HTML template at the bottom of the dropdown pop-up box through the<code>footer</code>slot.</p>'
+          '<p>Customize the HTML template at the bottom of the dropdown pop-up box through the <code>footer</code> slot.</p>'
       },
       'codeFiles': ['slot-footer.vue']
     },
@@ -428,7 +401,7 @@ export default {
       'desc': {
         'zh-CN': '<p>通过 <code>empty</code> 插槽自定义没有选项列表时显示的 HTML 模板。</p>\n',
         'en-US':
-          '<p>Customize the HTML template displayed when there is no option list through the<code>empty</code>slot.</p>'
+          '<p>Customize the HTML template displayed when there is no option list through the <code>empty</code> slot.</p>'
       },
       'codeFiles': ['slot-empty.vue']
     },
@@ -437,7 +410,7 @@ export default {
       'name': { 'zh-CN': '输入框前缀插槽', 'en-US': 'Predix slot' },
       'desc': {
         'zh-CN': '<p>通过 <code>prefix</code> 插槽自定义输入框前缀的 HTML 模板。</p>\n',
-        'en-US': '<p>Customize the HTML template for the input box prefix through the<code>prefix</code>slot. </p>\n'
+        'en-US': '<p>Customize the HTML template for the input box prefix through the <code>prefix</code> slot. </p>\n'
       },
       'codeFiles': ['slot-prefix.vue']
     },
@@ -446,9 +419,36 @@ export default {
       'name': { 'zh-CN': '触发源插槽', 'en-US': 'Reference slot' },
       'desc': {
         'zh-CN': '<p>通过 <code>reference</code> 插槽自定义触发源的 HTML 模板。</p>\n',
-        'en-US': '<p>Customize the HTML template of the trigger source through the<code>reference</code>slot.</p>'
+        'en-US': '<p>Customize the HTML template of the trigger source through the <code>reference</code> slot.</p>'
       },
       'codeFiles': ['slot-reference.vue']
+    },
+    {
+      'demoId': 'events',
+      'name': { 'zh-CN': '事件', 'en-US': 'Events' },
+      'desc': {
+        'zh-CN':
+          '<div class="tip custom-block">' +
+          '<p class="custom-block-title">事件说明</p>\n' +
+          '<p>change：监听 v-model 的值发生变化。</p>\n' +
+          '<p>clear：监听单选时，点击清空按钮。</p>\n' +
+          '<p>blur：监听 input 失去焦点。</p>\n' +
+          '<p>focus：监听 input 获得焦点。</p>\n' +
+          '<p>visible-change：监听下拉框可见状态的变化。</p>\n' +
+          '<p>remove-tag：监听多选移除选中的标签。</p>\n' +
+          '</div>\n',
+        'en-US':
+          '<div class="tip custom-block">' +
+          '<p class="custom-block-title"> Event Description</p>\n' +
+          '<p>change：Listen for changes in the value of the v-model.</p>' +
+          '<p>clear：When listening to radio selection, click the clear button.</p>\n' +
+          '<p>blur：Listening to input losing focus.</p>\n' +
+          '<p>focus：Listening for input to gain focus.</p>\n' +
+          '<p>visible-change: Listen for changes in the visible status of the dropdown box</p>\n' +
+          '<p>remove-tag：Listen for multiple selections to remove selected tags.</p>\n' +
+          '</div>\n'
+      },
+      'codeFiles': ['events.vue']
     }
   ],
   apis: [
@@ -465,7 +465,7 @@ export default {
             'en-US':
               'Is it allowed to copy the content of the input box, applicable to single choice searchable scenarios'
           },
-          'demoId': 'search-allow-copy'
+          'demoId': 'copy-single'
         },
         {
           'name': 'allow-create',
@@ -517,7 +517,7 @@ export default {
             'en-US':
               'Is the one click copy function enabled. Click the copy button to copy the text content of all labels with one click, separated by commas, only applicable to multiple selections'
           },
-          'demoId': 'tag-select'
+          'demoId': 'copy-multi'
         },
         {
           'name': 'collapse-tags',
@@ -607,11 +607,11 @@ export default {
         },
         {
           'name': 'input-box-type',
-          'type': 'string',
+          'type': '"input" | "underline"',
           'defaultValue': 'input',
           'desc': {
-            'zh-CN': '输入框的显示类型，可选值：input / underline',
-            'en-US': 'Display type of input box, optional values: input / underline'
+            'zh-CN': '输入框的显示类型',
+            'en-US': 'Display type of input box'
           },
           'demoId': 'input-box-type'
         },
@@ -790,11 +790,11 @@ export default {
         },
         {
           'name': 'render-type',
-          'type': 'string',
+          'type': '"tree" | "grid"',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '渲染为下拉表格或下拉树，可选值：tree / grid。需结合 grid-op / tree-op 使用',
-            'en-US': 'Configure Grid data when the Grid component is embedded in the drop-down list box.'
+            'zh-CN': '渲染为下拉表格或下拉树，需结合 grid-op / tree-op 使用',
+            'en-US': 'Rendered as a dropdown table or tree, to be used in conjunction with grid op/tree op'
           },
           'demoId': 'nest-grid'
         },
@@ -820,11 +820,11 @@ export default {
         },
         {
           'name': 'size',
-          'type': 'string',
+          'type': '"medium" | "small" | "mini"',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '输入框尺寸。可选值：medium / small / mini',
-            'en-US': 'Text box size; The value of this attribute can be medium, small, or mini'
+            'zh-CN': '输入框尺寸。',
+            'en-US': 'Text box size'
           },
           'demoId': 'size'
         },
@@ -846,17 +846,16 @@ export default {
             'zh-CN': '输入框中的标签是否可通过鼠标选中复制',
             'en-US': 'Can the label in the input box be copied by selecting it with the mouse'
           },
-          'demoId': 'tag-select'
+          'demoId': 'copy-multi'
         },
         {
           'name': 'tag-type',
-          'type': 'string',
+          'type': '"success" | "info" | "warning" | "danger" ',
           'defaultValue': '',
           'desc': {
-            'zh-CN':
-              '标签类型，仅多选适用。可选值：success / info / warning / danger ,使用 aurora 主题时设置该属性为 info',
+            'zh-CN': '标签类型，仅多选适用。使用 aurora 主题时设置该属性为 info',
             'en-US':
-              '标签类型，仅多选适用。可选值：success / info / warning / danger ,使用 aurora 主题时设置该属性为 info'
+              'Label type, only applicable for multiple choices. Set this property to info when using the aurora theme'
           },
           'demoId': 'tag-type'
         },
@@ -880,7 +879,7 @@ export default {
             'zh-CN': '自定义复制文本的分隔符，需结合 copyable 属性使用',
             'en-US': 'The separator for custom copied text needs to be used in conjunction with the copyable attribute'
           },
-          'demoId': 'tag-select'
+          'demoId': 'copy-multi'
         },
         {
           'name': 'text-field',
@@ -1079,15 +1078,15 @@ interface ICacheItem {
       type: 'interface',
       code: `
 interface ICacheOp {
-  "key": string // 本地缓存的唯一 key 值
-  "sortBy"?: 'frequency' | 'time' // 排序的字段，默认 frequency (频次)
-  "sort"?: 'desc' | 'asc' // 排序方式，默认 desc (降序)
-  "dataKey"?: string // 数据中的唯一标识的 key 名称,默认 value
-  "highlightClass"?: string // 个性化高亮 class 名称，默认：memorize-highlight
-  "highlightNum"?: number // 高亮个性化的条数,默认：Infinity
-  "cacheNum"?: number // 存储个性化的条数,默认：Infinity
-  "serialize"?: ()=> string  // 本地存储序列化方法,默认：JSON.stringify
-  "deserialize"?: ()=> ICacheItem[] // 本地存储序反列化方法，默认：JSON.parse
+  key: string // 本地缓存的唯一 key 值
+  sortBy?: 'frequency' | 'time' // 排序的字段，默认 frequency (频次)
+  sort?: 'desc' | 'asc' // 排序方式，默认 desc (降序)
+  dataKey?: string // 数据中的唯一标识的 key 名称,默认 value
+  highlightClass?: string // 个性化高亮 class 名称，默认：memorize-highlight
+  highlightNum?: number // 高亮个性化的条数,默认：Infinity
+  cacheNum?: number // 存储个性化的条数,默认：Infinity
+  serialize?: ()=> string  // 本地存储序列化方法,默认：JSON.stringify
+  deserialize?: ()=> ICacheItem[] // 本地存储序反列化方法，默认：JSON.parse
 }        
 `
     },

package/demos/pc/app/slider/about-step.spec.ts

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 test('步长', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('slider#about-step')
-  const preview = page.locator('#preview')
-  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+
+  const slider = page.locator('.tiny-slider-container .tiny-slider')
   const sliderBlock = slider.locator('div').nth(1)
   // 获取进度条的宽度
   const { width: sliderWidth } = await slider.boundingBox()

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

@@ -2,9 +2,8 @@ import { test, expect } from '@playwright/test'
 
 test('基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('slider#shortcut-operation')
-  const preview = page.locator('#preview')
-  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+  await page.goto('slider#basic-usage')
+  const slider = page.locator('.tiny-slider-container .tiny-slider')
   const sliderBlock = slider.locator('div').nth(1)
   // 获取进度条的宽度
   const { width: sliderWidth } = await slider.boundingBox()
@@ -15,6 +14,6 @@ test('基础用法', async ({ page }) => {
   // 滑块向右移动百分之二十
   await page.mouse.move(sliderWidth * 0.2 + x, y)
   const sliderTip = slider.locator('div').nth(2)
-  await expect(sliderTip).toHaveText('59')
+  await expect(sliderTip).toHaveText('39')
   await page.mouse.up()
 })

package/demos/pc/app/slider/dynamic-disable.spec.ts

@@ -3,9 +3,9 @@ import { test, expect } from '@playwright/test'
 test('禁用', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('slider#dynamic-disable')
-
+  
+  const slider = page.locator('.tiny-slider-container .tiny-slider')
   // 判断按钮禁用
-  const preview = page.locator('#preview')
-  const slider = preview.locator('.tiny-slider__wrapper div')
+  
   await expect(slider).toBeDisabled
 })

package/demos/pc/app/slider/format-tooltip.spec.ts

@@ -3,8 +3,7 @@ import { test, expect } from '@playwright/test'
 test('当前值', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('slider#format-tooltip')
-  const preview = page.locator('#preview')
-  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+  const slider = page.locator('.tiny-slider-container .tiny-slider')
   const sliderText = slider.locator('div').nth(2)
   await expect(sliderText).toHaveText('当前值为：20')
 })