@opentiny/vue-docs 2.2.19 → 2.2.21

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

@@ -22,9 +22,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>可通过<code>max</code>属性设置计数器允许的最大值，<code>min</code>属性设置计数器允许的最小值，<code>circulate</code>属性设置当计数器的数值为最大值，继续计数，是否从最小值开始计数。</p>\n',
+          '可通过<code>max</code>属性设置计数器允许的最大值，<code>min</code>属性设置计数器允许的最小值，<code>circulate</code>属性设置当计数器的数值为最大值，继续计数，是否从最小值开始计数。',
         'en-US':
-          '<p>By setting the maximum value allowed by the<code>max</code>attribute counter, setting the minimum value allowed by the<code>min</code>attribute counter, and setting the<code>cycle</code>attribute, when the counter value reaches the maximum value, continue counting, whether to start counting from the minimum value.</p>\n'
+          'By setting the maximum value allowed by the<code>max</code>attribute counter, setting the minimum value allowed by the<code>min</code>attribute counter, and setting the<code>cycle</code>attribute, when the counter value reaches the maximum value, continue counting, whether to start counting from the minimum value.'
       },
       codeFiles: ['max-min.vue']
     },
@@ -35,9 +35,8 @@ export default {
         'en-US': 'Step'
       },
       desc: {
-        'zh-CN': '<p>可通过<code>step</code>属性设置计数器的加减数值。</p>\n',
-        'en-US':
-          '<p>Set the addition and subtraction values of the counter through the<code>step</code>attribute.</p>\n'
+        'zh-CN': '可通过<code>step</code>属性设置计数器的加减数值。',
+        'en-US': 'Set the addition and subtraction values of the counter through the<code>step</code>attribute.'
       },
       codeFiles: ['about-step.vue']
     },
@@ -48,10 +47,9 @@ export default {
         'en-US': 'Numerical precision and format'
       },
       desc: {
-        'zh-CN':
-          '<p>可通过<code>precision</code>属性设置计数器的精度值，<code>format</code>属性设置数字显示格式。</p>\n',
+        'zh-CN': '可通过<code>precision</code>属性设置计数器的精度值，<code>format</code>属性设置数字显示格式。',
         'en-US':
-          '<p>Set the precision value of the counter through the<code>precision</code>attribute,<code>format</code> property sets the numeric display format.</p>\n'
+          'Set the precision value of the counter through the<code>precision</code>attribute,<code>format</code> property sets the numeric display format.'
       },
       codeFiles: ['precision.vue']
     },
@@ -62,7 +60,7 @@ export default {
         'en-US': 'Disabled'
       },
       desc: {
-        'zh-CN': '<p>可通过<code>disabled</code>属性设置是否禁用计数器。</p>',
+        'zh-CN': '可通过<code>disabled</code>属性设置是否禁用计数器。',
         'en-US': 'Disable the counter by setting <code>disabled</code>.'
       },
       codeFiles: ['dynamic-disabled.vue']
@@ -77,10 +75,24 @@ export default {
         'zh-CN':
           '可通过<code>allow-empty</code>属性设置计数器内容的可清空特性，默认为 <code>false</code>，表示不可清空。',
         'en-US':
-          '<p>You can use the <code>allow-empty</code> property to set the clearability of counter contents. The default value is <code>false</code>, indicating that the data cannot be cleared. </p>\n'
+          'You can use the <code>allow-empty</code> property to set the clearability of counter contents. The default value is <code>false</code>, indicating that the data cannot be cleared. '
       },
       codeFiles: ['allow-empty.vue']
     },
+    {
+      demoId: 'empty-value',
+      name: {
+        'zh-CN': '设定清空输入后的绑定值',
+        'en-US': 'Sets the binding value after the input is cleared'
+      },
+      desc: {
+        'zh-CN':
+          '可通过 <code>empty-value</code> 属性设置计数器在可清空下，清空后组件的绑定值。默认为 <code>undefined</code>。示例中将清空后组件绑定值改为<code>null</code>',
+        'en-US':
+          'You can use the <code>empty-value</code> attribute to set the binding value of the cleared component when the counter can be cleared. The default value is <code>undefined</code>. In the example, the component binding value is changed to <code>null</code>.'
+      },
+      codeFiles: ['empty-value.vue']
+    },
     {
       demoId: 'numeric-size',
       name: {
@@ -89,9 +101,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>可通过<code>size</code> 属性设置计数器尺寸，可选值有<code>medium</code><code>small</code><code>mini</code>。</p>\n',
+          '可通过<code>size</code> 属性设置计数器尺寸，可选值有<code>medium</code><code>small</code><code>mini</code>。',
         'en-US':
-          '<p>You can set the counter size through the<code>size</code>attribute.The value can be <code>medium</code><code>small</code><code>mini</code>. </p>\n'
+          'You can set the counter size through the<code>size</code>attribute.The value can be <code>medium</code><code>small</code><code>mini</code>. '
       },
       codeFiles: ['numeric-size.vue']
     },
@@ -103,9 +115,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>可通过<code>controls</code> 属性设置计数器是否显示加减按钮，<code>controls-position</code> 属性设置加减按钮显示的位置。加减按钮默认分列两侧显示，<code>show-left</code> 属性设置左对齐。</p>\n',
+          '可通过<code>controls</code> 属性设置计数器是否显示加减按钮，<code>controls-position</code> 属性设置加减按钮显示的位置。加减按钮默认分列两侧显示，<code>show-left</code> 属性设置左对齐。',
         'en-US':
-          '<p>By setting whether the<code>controls</code>attribute counter displays add/subtract buttons, set the position where the<code>controls position</code>attribute add/subtract buttons are displayed. The addition and subtraction buttons are displayed on both sides of the column by default,<code>show-left</code> property set to left</p>\n'
+          'By setting whether the<code>controls</code>attribute counter displays add/subtract buttons, set the position where the<code>controls position</code>attribute add/subtract buttons are displayed. The addition and subtraction buttons are displayed on both sides of the column by default,<code>show-left</code> property set to left'
       },
       codeFiles: ['controls.vue']
     },
@@ -116,9 +128,9 @@ export default {
         'en-US': 'Mouse wheel scrolling change value'
       },
       desc: {
-        'zh-CN': '<p>可通过<code>mouse-wheel</code>属性设置控制鼠标滚动滑轮的数值。</p>\n',
+        'zh-CN': '可通过<code>mouse-wheel</code>属性设置控制鼠标滚动滑轮的数值。',
         'en-US':
-          '<p>You can use the <code>mouse-wheel</code> attribute to control whether the scroll wheel can change the value. </p>\n'
+          'You can use the <code>mouse-wheel</code> attribute to control whether the scroll wheel can change the value. '
       },
       codeFiles: ['mouse-wheel.vue']
     },
@@ -129,9 +141,9 @@ export default {
         'en-US': 'Unit'
       },
       desc: {
-        'zh-CN': '<p>可通过<code>unit</code>属性设置计数器的单位，设置单位后，加减按钮将不可用。</p>\n',
+        'zh-CN': '可通过<code>unit</code>属性设置计数器的单位，设置单位后，加减按钮将不可用。',
         'en-US':
-          '<p>Set the unit of the counter by using the <code>unit</code>property. After setting the unit, the increase and decrease buttons will be disabled.</p>\n'
+          'Set the unit of the counter by using the <code>unit</code>property. After setting the unit, the increase and decrease buttons will be disabled.'
       },
       codeFiles: ['unit.vue']
     },
@@ -142,8 +154,10 @@ export default {
         'en-US': 'Value change event'
       },
       desc: {
-        'zh-CN': '<p> 可通过<code>@change</code>设置监听数值改变事件。</p>\n',
-        'en-US': 'The <code>@change</code> event is triggered when the value of the text box is changed. </p>\n'
+        'zh-CN':
+          '可通过<code>@change</code>设置监听数值改变事件。当<code>change-compat</code>为false时，仅当加减按钮及直接输入数值时会触发<code>change</code>事件。',
+        'en-US':
+          'The <code>@change</code> event is triggered when the value of the text box is changed. When the<code>change compat</code>is false, the <code>change</code> event will be triggered when only the add and subtract buttons and directly entering numerical values are used.</p>\n'
       },
       codeFiles: ['change-event.vue']
     },
@@ -154,8 +168,8 @@ export default {
         'en-US': 'Focus Event'
       },
       desc: {
-        'zh-CN': '<p>可通过<code>@focus</code>设置监听输入框获得焦点事件。</p>\n',
-        'en-US': 'The <code>@focus</code> event is triggered when the text box is focused. </p>\n'
+        'zh-CN': '可通过<code>@focus</code>设置监听输入框获得焦点事件。',
+        'en-US': 'The <code>@focus</code> event is triggered when the text box is focused. '
       },
       codeFiles: ['focus-event.vue']
     },
@@ -166,11 +180,23 @@ export default {
         'en-US': 'Out of Focus Event'
       },
       desc: {
-        'zh-CN': '<p>可通过<code>@blur</code>设置监听输入框失去焦点事件。</p>\n',
-        'en-US': '<p>The<code>@blur</code>event is triggered when the text box loses focus. </p>\n'
+        'zh-CN': '可通过<code>@blur</code>设置监听输入框失去焦点事件。',
+        'en-US': 'The<code>@blur</code>event is triggered when the text box loses focus. '
       },
       codeFiles: ['blur-event.vue']
     },
+    {
+      demoId: 'string-mode',
+      name: {
+        'zh-CN': '高精度',
+        'en-US': 'Out of Focus Event'
+      },
+      desc: {
+        'zh-CN': '可通过 <code>string-mode</code> 设置高精度模式，当 JS 默认的 Number 不满足数字的长度与精度需求时。',
+        'en-US': 'The<code>@blur</code>event is triggered when the text box loses focus. '
+      },
+      codeFiles: ['string-mode.vue']
+    },
     {
       demoId: 'filter-mode',
       name: {
@@ -179,7 +205,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过<code> shape="filter" </code>属性设置切换过滤器模式，过滤器模式下可传入<code>title</code>显示标题，<code>tip</code>显示提示信息，<code>clearable</code>是否显示清除按钮，默认值为<code>true</code>。<code>blank</code>属性将过滤器背景设置为透明。</p>\n',
+          '通过<code> shape="filter" </code>属性设置切换过滤器模式，过滤器模式下可传入<code>title</code>显示标题，<code>tip</code>显示提示信息，<code>clearable</code>是否显示清除按钮，默认值为<code>true</code>。<code>blank</code>属性将过滤器背景设置为透明。',
         'en-US':
           'Set the <code>shape="filter"</code> attribute to switch the filter mode. In the filter mode, you can transfer the <code>title</code> to display the title and <code>tip</code> to display the prompt. <code>clearable</code>Indicates whether to display the Clear button. The default value is <code>true</code>.<code>blank</code> property sets the filter background to transparent.'
       },
@@ -193,7 +219,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过<code>filter</code>属性展示筛选框，<code>filter-change</code>事件筛选框选择触发，过滤器模式下点击关闭图标，触发<code>clear</code>事件。</p>\n',
+          '通过<code>filter</code>属性展示筛选框，<code>filter-change</code>事件筛选框选择触发，过滤器模式下点击关闭图标，触发<code>clear</code>事件。',
         'en-US':
           'The <code>filter</code> attribute is used to display the filter box. Select Trigger in the <code>filter-change</code> event filter box. In filter mode, click the close icon to trigger the <code>clear</code> event.'
       },

package/demos/pc/app/popconfirm/trigger.spec.ts

@@ -4,15 +4,17 @@ test('触发方式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popconfirm#trigger')
 
-  const demo = page.locator('#trigger')
-  const popConfirm = demo.locator('.tiny-popconfirm .tiny-popconfirm__reference .tiny-button')
+  const hoverBtn = page.getByRole('button', { name: '鼠标悬停显示' })
+  const clickBtn = page.getByRole('button', { name: '点击显示' })
   const popConfirmPopover = page.locator('body > .tiny-popconfirm-popover')
+  const hoverValueBtn = page.getByRole('button', { name: '确定' })
 
-  await popConfirm.first().hover()
+  await hoverBtn.hover()
+  await page.waitForTimeout(100)
   await expect(popConfirmPopover.first()).toBeVisible()
+  await hoverValueBtn.click()
+  await page.waitForTimeout(100)
 
-  await popConfirm.nth(1).hover()
-  await expect(popConfirmPopover.nth(1)).not.toBeVisible()
-  await popConfirm.nth(1).click()
+  await clickBtn.click()
   await expect(popConfirmPopover.nth(1)).toBeVisible()
 })

package/demos/pc/app/popconfirm/type.spec.ts

@@ -1,4 +1,5 @@
-import { test, expect, Locator } from '@playwright/test'
+import type { Locator } from '@playwright/test'
+import { test, expect } from '@playwright/test'
 
 test('图标类型', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
@@ -9,16 +10,16 @@ test('图标类型', async ({ page }) => {
   const popConfirmPopover = page.locator('body > .tiny-popconfirm-popover')
   const getIcon = (parent: Locator) => parent.locator('svg.tiny-svg path').first()
 
-  await popConfirm.first().click()
+  await popConfirm.first().hover()
   await expect(popConfirmPopover.first()).toBeVisible()
   await expect(getIcon(popConfirmPopover.first())).toBeVisible()
-  await popConfirm.nth(1).click()
+  await popConfirm.nth(1).hover()
   await expect(popConfirmPopover.nth(1)).toBeVisible()
   await expect(getIcon(popConfirmPopover.nth(1))).toBeVisible()
-  await popConfirm.nth(2).click()
+  await popConfirm.nth(2).hover()
   await expect(popConfirmPopover.nth(2)).toBeVisible()
   await expect(getIcon(popConfirmPopover.nth(2))).toBeVisible()
-  await popConfirm.nth(3).click()
+  await popConfirm.nth(3).hover()
   await expect(popConfirmPopover.nth(3)).toBeVisible()
   await expect(getIcon(popConfirmPopover.nth(3))).toBeVisible()
 })

package/demos/pc/app/popeditor/condition-layout-composition-api.vue

@@ -14,6 +14,7 @@
 <script setup>
 import { ref } from 'vue'
 import { Popeditor as TinyPopeditor, Select, Numeric } from '@opentiny/vue'
+import { hooks } from '@opentiny/vue-common'
 
 const value = ref(5)
 const gridOp = ref({
@@ -54,7 +55,7 @@ const conditions = ref([
   {
     label: '城市',
     field: 'city',
-    component: Select,
+    component: hooks.markRaw(Select),
     attrs: {
       options: [
         { label: '福州', value: 'fz' },
@@ -63,7 +64,7 @@ const conditions = ref([
     },
     span: 6
   },
-  { label: '员工', field: 'employees', component: Numeric }
+  { label: '员工', field: 'employees', component: hooks.markRaw(Numeric) }
 ])
 
 function remoteSearch({ page }) {

package/demos/pc/app/popeditor/condition-layout.vue

@@ -13,6 +13,7 @@
 
 <script>
 import { Popeditor, Select, Numeric } from '@opentiny/vue'
+import { hooks } from '@opentiny/vue-common'
 
 export default {
   components: {
@@ -59,7 +60,7 @@ export default {
         {
           label: '城市',
           field: 'city',
-          component: Select,
+          component: hooks.markRaw(Select),
           attrs: {
             options: [
               { label: '福州', value: 'fz' },
@@ -68,7 +69,7 @@ export default {
           },
           span: 6
         },
-        { label: '员工', field: 'employees', component: Numeric }
+        { label: '员工', field: 'employees', component: hooks.markRaw(Numeric) }
       ]
     }
   },

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

@@ -101,7 +101,7 @@ const gridOp = ref({
 })
 
 function handleClick(next) {
-  // doSomething() // do something you want
-  next() // next
+  // do something you want
+  next()
 }
 </script>

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

@@ -109,8 +109,8 @@ export default {
   },
   methods: {
     handleClick(next) {
-      // doSomething() // do something you want
-      next() // next
+      // do something you want
+      next()
     }
   }
 }

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

@@ -193,7 +193,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '\n          <p>通过 <code>before-close</code> 属性可以配置一个拦截弹窗关闭的方法。如果方法返回 <code>false</code> 值，则拦截弹窗关闭；否则不拦截。</p>\n          <p>可以通过该拦截方法传入的参数获取关闭的操作类型 <code>confirm</code> 弹窗有以下关闭类型：</p>\n          <ul>\n            <li>confirm：点击确认时关闭</li>\n            <li>cancel：点击取消时关闭</li>\n            <li>close：点击关闭按钮时关闭</li>\n          </ul>\n        ',
+          '<p>通过 <code>before-close</code> 属性可以配置一个拦截弹窗关闭的方法。如果方法返回 <code>false</code> 值，则拦截弹窗关闭；否则不拦截。</p>\n          <p>可以通过该拦截方法传入的参数获取关闭的操作类型 <code>confirm</code> 弹窗有以下关闭类型：</p>\n          <ul>\n            <li>confirm：点击确认时关闭</li>\n            <li>cancel：点击取消时关闭</li>\n            <li>close：点击关闭按钮时关闭</li>\n          </ul>\n        ',
         'en-US':
           '<p>The <code>tabindex</code> attribute is used to determine whether the focus can be obtained by pressing Tab and the focus sequence. This parameter is valid only when the <code>readonly</code> attribute is set to false. </p>'
       },
@@ -206,8 +206,8 @@ export default {
         'en-US': 'Reset'
       },
       desc: {
-        'zh-CN': '<p>通过 <code>readonly</code> 属性设置为是否禁用。</p>',
-        'en-US': '<p>Use the <code>before-reset</code> attribute to set the hook function before reset. </p>'
+        'zh-CN': '<p>通过 <code>readonly</code> 属性设置为是否只读。</p>',
+        'en-US': '<p>Set the <code>readonly</code> attribute to read-only.</p>'
       },
       codeFiles: ['readonly.vue']
     },
@@ -215,12 +215,13 @@ export default {
       demoId: 'tabindex',
       name: {
         'zh-CN': '输入框的 tabindex',
-        'en-US': 'Component Query Condition Slot'
+        'en-US': 'tabindex in the text box'
       },
       desc: {
         'zh-CN':
           '<p>通过 <code>tabindex</code> 属性设置通过 Tab 键获焦及获焦顺序（<code>readonly</code> 属性设置为 false 时有效）。</p>',
-        'en-US': '<p>Customize the pop-up panel query structure by slot <code>search</code>. </p>'
+        'en-US':
+          '<p>Set the focus obtaining and focus obtaining sequence by pressing Tab through the <code>tabindex</code> attribute. This parameter is valid only when the <code>readonly</code> attribute is set to false.</p>'
       },
       codeFiles: ['tabindex.vue']
     },
@@ -232,7 +233,7 @@ export default {
       },
       desc: {
         'zh-CN': '<p>通过 <code>before-reset</code> 属性设置重置前的钩子函数。</p>',
-        'en-US': '<p> is set to read-only through the <code>disabled</code> attribute. </p>'
+        'en-US': '<p>Use the <code>before-reset</code> attribute to set the hook function before reset. </p>'
       },
       codeFiles: ['before-reset.vue']
     },
@@ -240,12 +241,11 @@ export default {
       demoId: 'slot',
       name: {
         'zh-CN': '组件查询条件插槽',
-        'en-US': 'The filter criteria in the pop-up window can be cleared.'
+        'en-US': 'Component Query Condition Slot'
       },
       desc: {
         'zh-CN': '<p>通过插槽 <code>search</code> 自定义弹出面板查询结构。</p>',
-        'en-US':
-          'The <p><code>clearable</code> Popeditor component supports the configuration of the Clear button in the search form. </p>'
+        'en-US': 'Customize the pop-up panel query structure through slot <code>search</code>.'
       },
       codeFiles: ['slot.vue']
     },
@@ -268,9 +268,8 @@ export default {
         'en-US': 'Submit Field Mapping'
       },
       desc: {
-        'zh-CN': '<p>通过 <code>disabled</code> 属性设置为是否只读。</p>',
-        'en-US':
-          '<p>The <code>value-field</code> attribute is used to set the fields submitted by the component to the background. </p>'
+        'zh-CN': '<p>通过 <code>disabled</code> 属性设置为是否禁用。</p>',
+        'en-US': '<p>Use the <code>disabled</code> attribute to set whether to disable the function.</p>'
       },
       codeFiles: ['disabled.vue']
     },

package/demos/pc/app/radio/dynamic-disable-composition-api.vue

@@ -4,9 +4,7 @@
     <tiny-radio disabled v-model="radio" label="不选中禁用">不选中禁用</tiny-radio>
     <div class="mt-20">
       <tiny-radio-group disabled v-model="radio1">
-        <tiny-radio :label="3">备选项1</tiny-radio>
-        <tiny-radio :label="6">备选项2</tiny-radio>
-        <tiny-radio :label="9">备选项3</tiny-radio>
+        <tiny-radio v-for="item in dataArr" :key="item.value" :label="item.lable">{{ item.value }}</tiny-radio>
       </tiny-radio-group>
     </div>
 
@@ -25,8 +23,13 @@ import { ref } from 'vue'
 import { Radio as TinyRadio, RadioButton as TinyRadioButton, RadioGroup as TinyRadioGroup } from '@opentiny/vue'
 
 const radio = ref('禁用')
-const radio1 = ref('3')
+const radio1 = ref('6')
 const radio2 = ref('1')
+const dataArr = ref([
+  { lable: '3', value: '备选项1' },
+  { lable: '6', value: '备选项2' },
+  { lable: '9', value: '备选项3' }
+])
 </script>
 
 <style scoped>

package/demos/pc/app/radio/dynamic-disable.vue

@@ -4,9 +4,7 @@
     <tiny-radio disabled v-model="radio" label="不选中禁用">不选中禁用</tiny-radio>
     <div class="mt-20">
       <tiny-radio-group disabled v-model="radio1">
-        <tiny-radio :label="3">备选项1</tiny-radio>
-        <tiny-radio :label="6">备选项2</tiny-radio>
-        <tiny-radio :label="9">备选项3</tiny-radio>
+        <tiny-radio v-for="item in dataArr" :key="item.value" :label="item.lable">{{ item.value }}</tiny-radio>
       </tiny-radio-group>
     </div>
 
@@ -32,8 +30,13 @@ export default {
   data() {
     return {
       radio: '禁用',
-      radio1: '3',
-      radio2: '1'
+      radio1: '6',
+      radio2: '1',
+      dataArr: [
+        { lable: '3', value: '备选项1' },
+        { lable: '6', value: '备选项2' },
+        { lable: '9', value: '备选项3' }
+      ]
     }
   }
 }

package/demos/pc/app/roles/base-composition-api.vue

@@ -1,8 +1,8 @@
 <template>
-  <tiny-roles @change="change"></tiny-roles>
+  <tiny-roles @change="change" :popper-append-to-body="false"></tiny-roles>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Roles as TinyRoles, Modal } from '@opentiny/vue'
 
 function change(userId) {

package/demos/pc/app/roles/base.vue

@@ -1,8 +1,8 @@
 <template>
-  <tiny-roles @change="change"></tiny-roles>
+  <tiny-roles @change="change" :popper-append-to-body="false"></tiny-roles>
 </template>
 
-<script lang="jsx">
+<script>
 import { Roles, Modal } from '@opentiny/vue'
 
 export default {

package/demos/pc/app/select/collapse-tags-composition-api.vue

@@ -3,7 +3,7 @@
     <br />
     <div>场景1： collapse-tags折叠</div>
     <br />
-    <tiny-select v-model="value1" multiple collapse-tags>
+    <tiny-select v-model="value1" :show-proportion="true" multiple collapse-tags>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <br />
@@ -16,6 +16,11 @@
     <br />
     <br />
     <br />
+    <div>场景3： click-expand 折叠</div>
+    <br />
+    <tiny-select v-model="value3" :max-visible-rows="2" multiple click-expand>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
   </div>
 </template>
 
@@ -33,6 +38,7 @@ const options = ref([
 
 const value1 = ref(['选项1', '选项2'])
 const value2 = ref(['选项1', '选项2', '选项3', '选项4'])
+const value3 = ref(['选项1', '选项2', '选项3', '选项4', '选项5'])
 </script>
 
 <style lang="less" scoped>

package/demos/pc/app/select/collapse-tags.spec.ts

@@ -1,32 +1,53 @@
 import { test, expect } from '@playwright/test'
 
-test('collapse-tags', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('select#collapse-tags')
-  const wrap = page.locator('#collapse-tags')
-  const select = wrap.locator('.tiny-select').nth(0)
-  const dropdown = page.locator('body > .tiny-select-dropdown')
-  const tag = select.locator('.tiny-tag')
-  const option = dropdown.locator('.tiny-option')
-
-  // 验证默认值的折叠标签显示
-  await expect(tag).toHaveCount(2)
-  await expect(tag.filter({ hasText: '黄金糕' })).toBeVisible()
-  await expect(tag.filter({ hasText: '+ 1' })).toBeVisible()
-
-  // 点击下拉后选中效果
-  await tag.first().click()
-  await expect(option.filter({ hasText: '黄金糕' })).toHaveClass(/selected/)
-  await expect(option.filter({ hasText: '双皮奶' })).toHaveClass(/selected/)
-
-  // 取消选中一个
-  await option.filter({ hasText: '黄金糕' }).locator('span').nth(2).click()
-  await expect(tag.filter({ hasText: '+ 1' })).toBeHidden()
-  await expect(tag).toHaveCount(1)
-
-  // 再选中2个
-  await option.filter({ hasText: '蚵仔煎' }).locator('span').nth(2).click()
-  await option.filter({ hasText: '北京烤鸭' }).locator('span').nth(2).click()
-  await expect(tag.filter({ hasText: '+ 2' })).toBeVisible()
-  await expect(tag).toHaveCount(2)
+test.describe('展开折叠标签', () => {
+  test('collapse-tags', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('select#collapse-tags')
+    const wrap = page.locator('#collapse-tags')
+    const select = wrap.locator('.tiny-select').nth(0)
+    const dropdown = page.locator('body > .tiny-select-dropdown')
+    const tag = select.locator('.tiny-tag')
+    const option = dropdown.locator('.tiny-option')
+
+    // 验证默认值的折叠标签显示
+    await expect(tag).toHaveCount(2)
+    await expect(tag.filter({ hasText: '黄金糕' })).toBeVisible()
+    await expect(tag.filter({ hasText: '+ 1' })).toBeVisible()
+
+    // 点击下拉后选中效果
+    await tag.first().click()
+    await expect(option.filter({ hasText: '黄金糕' })).toHaveClass(/selected/)
+    await expect(option.filter({ hasText: '双皮奶' })).toHaveClass(/selected/)
+
+    // 取消选中一个
+    await option.filter({ hasText: '黄金糕' }).locator('span').nth(2).click()
+    await expect(tag.filter({ hasText: '+ 1' })).toBeHidden()
+    await expect(tag).toHaveCount(1)
+
+    // 再选中2个
+    await option.filter({ hasText: '蚵仔煎' }).locator('span').nth(2).click()
+    await option.filter({ hasText: '北京烤鸭' }).locator('span').nth(2).click()
+    await expect(tag.filter({ hasText: '+ 2' })).toBeVisible()
+    await expect(tag).toHaveCount(2)
+  })
+
+  test('click-expand 点击展开折叠', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('select#collapse-tags')
+
+    const select = page.locator('#collapse-tags .tiny-select').nth(2)
+    const expandTag = select.locator('.tiny-select__tags-collapse')
+    const collapseSpan = select.locator('.tiny-select__collapse-text')
+    const tags = select.locator('.tiny-tag')
+
+    await expect(select).toHaveClass(/is-click-expand/)
+    await expect(expandTag).toBeVisible()
+    await expect(collapseSpan).not.toBeVisible()
+    await expect(tags.last()).toHaveClass(/not-visible/)
+    await expandTag.click()
+    await expect(expandTag).not.toBeVisible()
+    await expect(collapseSpan).toBeVisible()
+    await expect(tags.last()).not.toHaveClass(/not-visible/)
+  })
 })

package/demos/pc/app/select/collapse-tags.vue

@@ -3,7 +3,7 @@
     <br />
     <div>场景1： collapse-tags折叠</div>
     <br />
-    <tiny-select v-model="value1" multiple collapse-tags>
+    <tiny-select v-model="value1" :show-proportion="true" multiple collapse-tags>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <br />
@@ -16,6 +16,11 @@
     <br />
     <br />
     <br />
+    <div>场景3： click-expand 折叠</div>
+    <br />
+    <tiny-select v-model="value3" :max-visible-rows="2" multiple click-expand>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
   </div>
 </template>
 
@@ -34,10 +39,12 @@ export default {
         { value: '选项2', label: '双皮奶' },
         { value: '选项3', label: '蚵仔煎' },
         { value: '选项4', label: '龙须面超长超长超长超长超长超长超长超长超长' },
-        { value: '选项5', label: '北京烤鸭' }
+        { value: '选项5', label: '北京烤鸭' },
+        { value: '选项6', label: '肠粉' }
       ],
       value1: ['选项1', '选项2'],
-      value2: ['选项1', '选项2', '选项3', '选项4']
+      value2: ['选项1', '选项2', '选项3', '选项4'],
+      value3: ['选项1', '选项2', '选项3', '选项4', '选项5']
     }
   }
 }

package/demos/pc/app/select/copy-multi.spec.ts

@@ -8,6 +8,7 @@ test('多选复制单个标签', async ({ page }) => {
   const select = wrap.locator('.tiny-select').nth(0)
   const tag = select.locator('.tiny-tag').nth(0)
 
+  await expect(tag).toContainText('黄金糕')
   await page.waitForTimeout(200)
   const tagBox = await tag.locator('span').boundingBox()
   const x = tagBox.x + tagBox.width

package/demos/pc/app/select/copy-single.spec.ts

@@ -33,6 +33,7 @@ test('单选可搜索配置 allow-copy 可复制', async ({ page }) => {
   const input = select.locator('.tiny-input__inner')
   const valueInput = wrap.locator('.custom .tiny-input__inner')
 
+  await expect(input).toHaveValue('黄金糕')
   await page.waitForTimeout(200)
   const inputBox = await input.boundingBox()