@opentiny/vue-docs 2.2.6 → 2.2.7

package/demos/pc/app/popover/events.spec.js

@@ -7,8 +7,12 @@ test('事件', async ({ page }) => {
   let button = page.getByRole('button', { name: '悬浮我触发' })
   let pop = page.getByRole('tooltip', { name: /这是一段内容/ })
   let notify1 = page.locator('.tiny-notify__content').filter({ hasText: /显示时触发/ })
+  let notify2 = page.locator('.tiny-notify__content').filter({ hasText: /隐藏时触发/ })
 
   await button.hover()
   await expect(pop).toBeVisible()
   await expect(notify1).toBeVisible()
+
+  await page.mouse.move(0, 0)
+  await expect(notify2).toBeVisible()
 })

package/demos/pc/app/popover/offset-composition-api.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <div class="row">
+    <div class="row arrow-row">
       <h1>箭头偏移：</h1>
-      <tiny-slider v-model="arrowOffset" :min="0" :max="100"></tiny-slider>
+      <tiny-slider v-model="arrowOffset" :min="0" :max="100" show-input></tiny-slider>
       <tiny-popover
         placement="bottom"
-        content="这是一段内容"
+        content="箭头偏移的内容"
         :arrow-offset="arrowOffset"
         trigger="manual"
         v-model="show"
@@ -17,12 +17,12 @@
       </tiny-popover>
     </div>
 
-    <div class="row">
+    <div class="row panel-row">
       <h1>面板偏移：</h1>
-      <tiny-slider v-model="offset" :min="-100" :max="100"></tiny-slider>
+      <tiny-slider v-model="offset" :min="-100" :max="100" show-input></tiny-slider>
       <tiny-popover
         placement="bottom"
-        content="这是一段内容"
+        content="面板偏移的内容"
         :offset="offset"
         trigger="manual"
         v-model="show"

package/demos/pc/app/popover/offset.spec.js

@@ -4,7 +4,35 @@ test('箭头偏移', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popover#offset')
 
-  // 默认偏移和50偏移
-  await expect(page.locator('.popper__arrow').nth(0)).toBeVisible()
-  await expect(page.locator('.popper__arrow').nth(1)).toBeVisible()
+  const preview = page.locator('.pc-demo-container')
+  const input1 = preview.locator('.tiny-slider__input input').nth(0)
+  const input2 = preview.locator('.tiny-slider__input input').nth(1)
+  const arrow = page.getByText('箭头偏移的内容').locator('.popper__arrow')
+  const panel = page.getByText('面板偏移的内容')
+
+  // 箭头偏移
+  await expect(arrow).toBeVisible()
+  let middle = await arrow.boundingBox()
+  await input1.fill('8')
+  await page.waitForTimeout(1000)
+  let left = await arrow.boundingBox()
+  await input1.fill('100')
+  await page.waitForTimeout(1000)
+  let right = await arrow.boundingBox()
+
+  expect(left.x < middle.x)
+  expect(middle.x < right.x)
+
+  // 面板偏移
+  await expect(panel).toBeVisible()
+  middle = await panel.boundingBox()
+  await input2.fill('-100')
+  await page.waitForTimeout(1000)
+  left = await panel.boundingBox()
+  await input2.fill('100')
+  await page.waitForTimeout(1000)
+  right = await panel.boundingBox()
+
+  expect(left.x < middle.x)
+  expect(middle.x < right.x)
 })

package/demos/pc/app/popover/offset.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <div class="row">
+    <div class="row arrow-row">
       <h1>箭头偏移：</h1>
-      <tiny-slider v-model="arrowOffset" :min="0" :max="100"></tiny-slider>
+      <tiny-slider v-model="arrowOffset" :min="0" :max="100" show-input></tiny-slider>
       <tiny-popover
         placement="bottom"
-        content="这是一段内容"
+        content="箭头偏移的内容"
         :arrow-offset="arrowOffset"
         trigger="manual"
         v-model="show"
@@ -17,12 +17,12 @@
       </tiny-popover>
     </div>
 
-    <div class="row">
+    <div class="row panel-row">
       <h1>面板偏移：</h1>
-      <tiny-slider v-model="offset" :min="-100" :max="100"></tiny-slider>
+      <tiny-slider v-model="offset" :min="-100" :max="100" show-input></tiny-slider>
       <tiny-popover
         placement="bottom"
-        content="这是一段内容"
+        content="面板偏移的内容"
         :offset="offset"
         trigger="manual"
         v-model="show"

package/demos/pc/app/popover/trigger.spec.js

@@ -21,9 +21,9 @@ test('触发方式', async ({ page }) => {
   await expect(pop2).toBeVisible()
   await page.waitForTimeout(100)
 
-  // await page.keyboard.press('Tab')
-  // await expect(pop3).toBeVisible()
-  // await page.waitForTimeout(100)
+  await button3.focus()
+  await expect(pop3).toBeVisible()
+  await page.waitForTimeout(100)
 
   await button4.click()
   await expect(pop4).toBeVisible()

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

@@ -194,7 +194,8 @@ export default {
 
         {
           'name': 'placement',
-          'type': `'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'`,
+          'type': 'IPopperPlacement',
+          'typeAnchorName': 'IPopperPlacement',
           'defaultValue': '"bottom"',
           'desc': {
             'zh-CN': '弹出层出现的位置',
@@ -217,7 +218,7 @@ export default {
             'zh-CN': '弹出层高度',
             'en-US': 'Layer height'
           },
-          'demoId': 'basic-usage'
+          'demoId': ''
         },
         {
           'name': 'disabled',
@@ -237,7 +238,7 @@ export default {
           'demoId': 'trigger'
         },
         {
-          'name': 'modelValue',
+          'name': 'v-model / modelValue',
           'type': 'boolean',
           'defaultValue': 'false',
           'desc': {
@@ -393,6 +394,13 @@ interface IPopperOption {
   removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
 }
       `
+    },
+    {
+      name: 'IPopperPlacement',
+      type: 'type',
+      code: `
+type IPopperPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
+      `
     }
   ]
 }

package/demos/pc/app/qr-code/basic-usage.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('qr-code#basic-usage')
+
+  const canvas = page.locator('.tiny-qr-code-container canvas')
+  await expect(canvas).toBeVisible()
+})

package/demos/pc/app/qr-code/icon.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义icon', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('qr-code#icon')
+
+  const canvas = page.locator('.tiny-qr-code-container canvas')
+  const canvasImg = page.locator('.tiny-qr-code-container .mask-icon img')
+  await expect(canvas).toBeVisible()
+  await expect(canvasImg).toBeVisible()
+})

package/demos/pc/app/qr-code/level.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('二维码纠错等级', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('qr-code#level')
+
+  const canvas = page.locator('.tiny-qr-code-container canvas')
+  await expect(canvas).toBeVisible()
+
+  const button = page.locator('.tiny-radio-button--small')
+  await expect(button.nth(0).locator('.tiny-radio-button__inner')).toHaveText('Low')
+  await expect(button.nth(1).locator('.tiny-radio-button__inner')).toHaveText('Medium')
+  await expect(button.nth(2).locator('.tiny-radio-button__inner')).toHaveText('Quality')
+  await expect(button.nth(3).locator('.tiny-radio-button__inner')).toHaveText('High')
+})

package/demos/pc/app/qr-code/style.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义样式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('qr-code#style')
+
+  const canvas = page.locator('.tiny-qr-code-container canvas')
+  await expect(canvas).toBeVisible()
+})

package/demos/pc/app/qr-code/webdoc/qr-code.js

@@ -37,10 +37,11 @@ export default {
     {
       'name': 'qr-code',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'value',
-          'type': 'String',
+          'type': 'string',
+          'defaultValue': '',
           'desc': {
             'zh-CN': '扫描后的文本',
             'en-US': 'scanned text'
@@ -49,7 +50,7 @@ export default {
         },
         {
           'name': 'size',
-          'type': 'Number',
+          'type': 'number',
           'defaultValue': '200',
           'desc': {
             'zh-CN': '二维码大小',
@@ -59,7 +60,7 @@ export default {
         },
         {
           'name': 'color',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '#000',
           'desc': {
             'zh-CN': '二维码颜色, 仅支持十六进制',
@@ -69,17 +70,18 @@ export default {
         },
         {
           'name': 'bordered',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': 'true',
           'desc': {
             'zh-CN': '是否有边框',
             'en-US': 'Whether has border style'
           },
-          'demoId': 'basic-usage'
+          'demoId': ''
         },
         {
           'name': 'icon',
-          'type': 'String',
+          'type': 'string',
+          'defaultValue': '',
           'desc': {
             'zh-CN': '二维码中图片的地址（目前只支持图片地址）',
             'en-US': 'include image url (only image link are supported)'
@@ -87,8 +89,8 @@ export default {
           'demoId': 'icon'
         },
         {
-          'name': 'iconSize',
-          'type': 'Number',
+          'name': 'icon-size',
+          'type': 'number',
           'defaultValue': '50',
           'desc': {
             'zh-CN': '二维码中图片的大小，icon 覆盖面积不能超过 30%， 否则影响扫码',
@@ -98,10 +100,10 @@ export default {
         },
         {
           'name': 'level',
-          'type': "'Low' | 'Medium' | 'Quality' | 'High'",
+          'type': 'string',
           'defaultValue': 'Medium',
           'desc': {
-            'zh-CN': '二维码纠错等级',
+            'zh-CN': "二维码纠错等级, 可选 'Low' | 'Medium' | 'Quality' | 'High'",
             'en-US': 'Error Code Level'
           },
           'demoId': 'level'

package/demos/pc/app/rich-text-editor/webdoc/rich-text-editor.js

@@ -40,7 +40,7 @@ export default {
     {
       'name': 'rich-text-editor',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'modelValue',
           'type': 'string',

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

@@ -29,7 +29,7 @@ export default {
     {
       'name': 'roles',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'fetch-role',
           'type': 'Function',

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

@@ -1,5 +1,5 @@
 <template>
-  <tiny-scroll-text></tiny-scroll-text>
+  <tiny-scroll-text text="设置 text 自定义滚动的文本内容"></tiny-scroll-text>
 </template>
 
 <script setup lang="jsx">

package/demos/pc/app/scroll-text/basic-usage.spec.ts

@@ -3,5 +3,5 @@ import { test, expect } from '@playwright/test'
 test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('scroll-text#basic-usage')
-  await expect(page.locator('.tiny-scroll-text__content')).toHaveCSS('animation-name', 'moveLeft')
+  await expect(page.getByText('设置 text 自定义滚动的文本内容')).toBeVisible()
 })

package/demos/pc/app/scroll-text/basic-usage.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-scroll-text></tiny-scroll-text>
+  <tiny-scroll-text text="设置 text 自定义滚动的文本内容"></tiny-scroll-text>
 </template>
 
 <script lang="jsx">

package/demos/pc/app/scroll-text/custom-text-style-composition-api.vue

@@ -2,7 +2,7 @@
   <tiny-scroll-text class="scrollclass"></tiny-scroll-text>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ScrollText as TinyScrollText } from '@opentiny/vue'
 </script>
 

package/demos/pc/app/scroll-text/custom-text-style.vue

@@ -2,7 +2,7 @@
   <tiny-scroll-text class="scrollclass"></tiny-scroll-text>
 </template>
 
-<script lang="jsx">
+<script>
 import { ScrollText } from '@opentiny/vue'
 
 export default {

package/demos/pc/app/scroll-text/hover-stop-composition-api.vue

@@ -2,6 +2,6 @@
   <tiny-scroll-text :hover-stop="true">设置 hover-stop 为 false 鼠标悬停后不会停止滚动</tiny-scroll-text>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ScrollText as TinyScrollText } from '@opentiny/vue'
 </script>

package/demos/pc/app/scroll-text/hover-stop.spec.ts

@@ -4,5 +4,5 @@ test('鼠标悬停时文本停止滚动', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('scroll-text#hover-stop')
   await page.locator('.tiny-scroll-text__content').dispatchEvent('mouseenter')
-  await expect(page.locator('.tiny-scroll-text__content')).toHaveCSS('animation-play-state', 'paused')
+  await expect(page.locator('.tiny-scroll-text__content > div')).toHaveCSS('animation-play-state', 'paused')
 })

package/demos/pc/app/scroll-text/hover-stop.vue

@@ -2,7 +2,7 @@
   <tiny-scroll-text :hover-stop="true">设置 hover-stop 为 false 鼠标悬停后不会停止滚动</tiny-scroll-text>
 </template>
 
-<script lang="jsx">
+<script>
 import { ScrollText } from '@opentiny/vue'
 
 export default {

package/demos/pc/app/scroll-text/scroll-direction-composition-api.vue

@@ -10,6 +10,6 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ScrollText as TinyScrollText } from '@opentiny/vue'
 </script>

package/demos/pc/app/scroll-text/scroll-direction.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('scroll-text#scroll-direction')
-  await expect(page.locator('.tiny-scroll-text__content').nth(0)).toHaveCSS('animation-name', 'moveLeft')
-  await expect(page.locator('.tiny-scroll-text__content').nth(1)).toHaveCSS('animation-name', 'moveRight')
-  await expect(page.locator('.tiny-scroll-text__content').nth(2)).toHaveCSS('animation-name', 'moveUp')
-  await expect(page.locator('.tiny-scroll-text__content').nth(3)).toHaveCSS('animation-name', 'moveDown')
+  await expect(page.locator('.tiny-scroll-text__content > div').nth(0)).toHaveCSS('animation-name', 'moveLeft')
+  await expect(page.locator('.tiny-scroll-text__content > div').nth(1)).toHaveCSS('animation-name', 'moveRight')
+  await expect(page.locator('.tiny-scroll-text__content > div').nth(2)).toHaveCSS('animation-name', 'moveUp')
+  await expect(page.locator('.tiny-scroll-text__content > div').nth(3)).toHaveCSS('animation-name', 'moveDown')
 })

package/demos/pc/app/scroll-text/scroll-direction.vue

@@ -10,7 +10,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { ScrollText } from '@opentiny/vue'
 
 export default {

package/demos/pc/app/scroll-text/scroll-time-composition-api.vue

@@ -2,6 +2,6 @@
   <tiny-scroll-text :time="10">设置 time 自定义滚动所用的时间为 10s</tiny-scroll-text>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ScrollText as TinyScrollText } from '@opentiny/vue'
 </script>

package/demos/pc/app/scroll-text/scroll-time.spec.ts

@@ -3,5 +3,5 @@ import { test, expect } from '@playwright/test'
 test('滚动时间间隔', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('scroll-text#scroll-time')
-  await expect(page.locator('.tiny-scroll-text__content')).toHaveCSS('animation-duration', '10s')
+  await expect(page.locator('.tiny-scroll-text__content > div')).toHaveCSS('animation-duration', '10s')
 })

package/demos/pc/app/scroll-text/scroll-time.vue

@@ -2,7 +2,7 @@
   <tiny-scroll-text :time="10">设置 time 自定义滚动所用的时间为 10s</tiny-scroll-text>
 </template>
 
-<script lang="jsx">
+<script>
 import { ScrollText } from '@opentiny/vue'
 
 export default {

package/demos/pc/app/scroll-text/slots-composition-api.vue

@@ -6,6 +6,6 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ScrollText as TinyScrollText } from '@opentiny/vue'
 </script>

package/demos/pc/app/scroll-text/slots.vue

@@ -6,7 +6,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { ScrollText } from '@opentiny/vue'
 
 export default {

package/demos/pc/app/scroll-text/webdoc/scroll-text.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': '可通过 text 自定义文本内容。',
+        'en-US': 'You can use <code>text</code> to customize the text content. '
+      },
       'codeFiles': ['basic-usage.vue']
     },
     {
@@ -27,24 +30,6 @@ export default {
       },
       'codeFiles': ['hover-stop.vue']
     },
-    {
-      'demoId': 'custom-scroll-text',
-      'name': { 'zh-CN': '自定义文本内容', 'en-US': 'Custom Text Content' },
-      'desc': {
-        'zh-CN': '<p>可通过 <code>text</code> 自定义文本内容。</p>\n',
-        'en-US': '<p>You can use <code>text</code> to customize the text content. </p>\n'
-      },
-      'codeFiles': ['custom-scroll-text.vue']
-    },
-    {
-      'demoId': 'slots',
-      'name': { 'zh-CN': '通过 solt 插槽自定义文本内容', 'en-US': 'Customize the text content through the Solt slot' },
-      'desc': {
-        'zh-CN': '<p>可通过 solt 插槽自定义文本内容。</p>\n',
-        'en-US': '<p>You can customize the text content through the solt slot. </p>\n'
-      },
-      'codeFiles': ['slots.vue']
-    },
     {
       'demoId': 'scroll-time',
       'name': { 'zh-CN': '滚动时间间隔', 'en-US': 'Scrolling Interval' },
@@ -62,49 +47,58 @@ export default {
         'en-US': '<p>You can use <code>class</code> to customize the text style. </p>\n'
       },
       'codeFiles': ['custom-text-style.vue']
+    },
+    {
+      'demoId': 'slots',
+      'name': { 'zh-CN': '插槽', 'en-US': 'Solt' },
+      'desc': {
+        'zh-CN': '<p>可通过 solt 插槽自定义文本内容。</p>\n',
+        'en-US': '<p>You can customize the text content through the solt slot. </p>\n'
+      },
+      'codeFiles': ['slots.vue']
     }
   ],
   apis: [
     {
       'name': 'scroll-text',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'direction',
-          'type': 'string',
-          'defaultValue': '该属性的默认值为 left',
+          'type': `'up' | 'left' | 'down' | 'right'`,
+          'defaultValue': `'left'`,
           'desc': {
-            'zh-CN': '滚动的方向;该属性的可选值为 up / left / down / right',
-            'en-US': 'Scrolling direction; The optional values of this attribute are up / left / down / right'
+            'zh-CN': '滚动的方向',
+            'en-US': 'Scrolling direction'
           },
           'demoId': 'scroll-direction'
         },
         {
           'name': 'hover-stop',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
+          'defaultValue': 'true',
           'desc': {
-            'zh-CN': 'hover 滚动是否停止，可选值为 false 或 true；默认值true。',
-            'en-US': 'Whether to stop scrolling. The value can be false or true. The default value is true.'
+            'zh-CN': 'hover 滚动是否停止',
+            'en-US': 'Whether to stop scrolling.'
           },
           'demoId': 'hover-stop'
         },
         {
           'name': 'time',
           'type': 'number',
-          'defaultValue': '该属性的默认值为 5',
+          'defaultValue': '5',
           'desc': {
-            'zh-CN': '整个滚动过程所用的时间，默认值 5s 。',
-            'en-US': 'Time taken for scrolling. The default value is 5s.'
+            'zh-CN': '整个滚动过程所用的时间',
+            'en-US': 'Time taken for scrolling'
           },
           'demoId': 'scroll-time'
         },
         {
           'name': 'text',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 ScrollText',
+          'defaultValue': `'ScrollText'`,
           'desc': { 'zh-CN': '滚动的文本内容', 'en-US': 'Scrolled text content' },
-          'demoId': 'custom-scroll-text'
+          'demoId': 'basic-usage'
         }
       ],
       'events': [],
@@ -113,7 +107,7 @@ export default {
           'name': 'default',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
+          'desc': { 'zh-CN': '默认插槽，滚动的内容的插槽', 'en-US': 'Default slot, the slot for scrolling content' },
           'demoId': 'custom-scroll-text'
         }
       ]

package/demos/pc/app/select/clear-no-match-value-composition-api.vue

@@ -1,11 +1,15 @@
 <template>
   <div>
-    <p>场景1：单选，val 找不到匹配值，val为：{{ val }}</p>
+    <p>
+      场景1：单选，val 找不到匹配值，val为： ,<span class="val">{{ val }}</span>
+    </p>
     <tiny-select v-model="val" :clear-no-match-value="true">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
 
-    <p>场景2：多选，multiVal 找不到匹配值，multiVal为：{{ multiVal }}</p>
+    <p>
+      场景2：多选，multiVal 找不到匹配值，multiVal为：<span class="multi-val">{{ multiVal }}</span>
+    </p>
     <tiny-select v-model="multiVal" :clear-no-match-value="true" multiple>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>

package/demos/pc/app/select/clear-no-match-value.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test'
+
+test('单选找不到匹配值', async ({ page }) => {
+  await page.goto('select#clear-no-match-value')
+  const wrap = page.locator('#clear-no-match-value')
+  const input = wrap.locator('.tiny-input__inner').nth(0)
+
+  // 验证是否清空不匹配的值
+  await expect(input).toHaveValue('')
+  await expect(wrap.locator('.val')).toHaveText('')
+})
+
+test('多选找不到匹配值', async ({ page }) => {
+  await page.goto('select#clear-no-match-value')
+  const wrap = page.locator('#clear-no-match-value')
+  const tag = wrap.locator('.tiny-select').nth(1).locator('.tiny-tag')
+
+  // 验证是否清空不匹配的值
+  await expect(tag).toHaveCount(1)
+  await expect(tag).toHaveText('双皮奶')
+  await expect(wrap.locator('.multi-val')).toHaveText('[ "选项2" ]')
+})