@opentiny/vue-docs 3.28.1 → 3.30.0

package/demos/pc/app/tag-input/collapsed-tag-composition-api.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="tiny-tag-input-demo">
+    <tiny-tag-input v-model="data" :placeholder="placeholder" :min-collapsed-num="minCollapsedNum"></tiny-tag-input>
+  </div>
+</template>
+
+<script setup>
+import { TinyTagInput } from '@opentiny/vue'
+import { reactive, ref } from 'vue'
+
+const data = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
+const minCollapsedNum = ref(5)
+const placeholder = ref('please enter a tag')
+</script>
+
+<style scoped>
+.tiny-tag-input-demo .tiny-tag-input {
+  margin-bottom: 20px;
+}
+</style>

package/demos/pc/app/tag-input/collapsed-tag.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="tiny-tag-input-demo">
+    <tiny-tag-input v-model="data" :placeholder="placeholder" :min-collapsed-num="minCollapsedNum"></tiny-tag-input>
+  </div>
+</template>
+
+<script>
+import { TinyTagInput } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTagInput
+  },
+  data() {
+    return {
+      data: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
+      placeholder: 'please enter a tag',
+      minCollapsedNum: 5
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tag-input-demo .tiny-tag-input {
+  margin-bottom: 20px;
+}
+</style>

package/demos/pc/app/tag-input/disabled-readonly-composition-api.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="tiny-tag-input-demo">
+    <span>disabled: </span><tiny-tag-input v-model="data" :placeholder="placeholder" disabled></tiny-tag-input>
+    <span>readonly：</span><tiny-tag-input v-model="data1" :placeholder="placeholder" readonly></tiny-tag-input>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+import { TinyTagInput } from '@opentiny/vue'
+
+const data = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
+const data1 = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
+</script>
+
+<style scoped>
+.tiny-tag-input-demo .tiny-tag-input {
+  margin-bottom: 20px;
+}
+</style>

package/demos/pc/app/tag-input/disabled-readonly.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="tiny-tag-input-demo">
+    <span>disabled: </span><tiny-tag-input v-model="data" :placeholder="placeholder" disabled></tiny-tag-input>
+    <span>readonly：</span><tiny-tag-input v-model="data1" :placeholder="placeholder" readonly></tiny-tag-input>
+  </div>
+</template>
+
+<script>
+import { TinyTagInput } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTagInput
+  },
+  data() {
+    return {
+      data: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
+      data1: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
+      placeholder: 'please enter a tag'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tag-input-demo .tiny-tag-input {
+  margin-bottom: 20px;
+}
+</style>

package/demos/pc/app/tag-input/draggable-tag-composition-api.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="tiny-tag-input-demo">
+    <tiny-tag-input v-model="data" draggable></tiny-tag-input>
+  </div>
+</template>
+
+<script setup>
+import { TinyTagInput } from '@opentiny/vue'
+import { reactive } from 'vue'
+
+const data = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
+</script>

package/demos/pc/app/tag-input/draggable-tag.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="tiny-tag-input-demo">
+    <tiny-tag-input v-model="data" draggable></tiny-tag-input>
+  </div>
+</template>
+
+<script>
+import { TinyTagInput } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTagInput
+  },
+  data() {
+    return {
+      data: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6']
+    }
+  }
+}
+</script>

package/demos/pc/app/tag-input/max-composition-api.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="tiny-tag-input-demo">
+    <tiny-tag-input v-model="data" :placeholder="placeholder" :max="max"></tiny-tag-input>
+  </div>
+</template>
+
+<script setup>
+import { TinyTagInput } from '@opentiny/vue'
+import { reactive } from 'vue'
+
+const data = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
+const max = 5
+const placeholder = 'please enter a tag'
+</script>
+
+<style scoped>
+.tiny-tag-input-demo .tiny-tag-input {
+  margin-bottom: 20px;
+}
+</style>

package/demos/pc/app/tag-input/max.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="tiny-tag-input-demo">
+    <tiny-tag-input v-model="data" :placeholder="placeholder" :max="max"></tiny-tag-input>
+  </div>
+</template>
+
+<script>
+import { TinyTagInput } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTagInput
+  },
+  data() {
+    return {
+      data: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
+      max: 5,
+      placeholder: 'enter up to 5 tags'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tag-input-demo .tiny-tag-input {
+  margin-bottom: 20px;
+}
+</style>

package/demos/pc/app/tag-input/prefix-suffix-composition-api.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="tiny-tag-input-demo">
+    <tiny-tag-input v-model="data" :placeholder="placeholder">
+      <template #prefix>
+        <span>prefix:</span>
+      </template>
+      <template #suffix>
+        <span>suffix</span>
+      </template>
+    </tiny-tag-input>
+  </div>
+</template>
+
+<script setup>
+import { TinyTagInput } from '@opentiny/vue'
+import { reactive, ref } from 'vue'
+
+const data = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
+const placeholder = ref('please enter a tag')
+</script>
+
+<style scoped>
+.tiny-tag-input-demo .tiny-tag-input {
+  margin-bottom: 20px;
+}
+</style>

package/demos/pc/app/tag-input/prefix-suffix.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="tiny-tag-input-demo">
+    <tiny-tag-input v-model="data" :placeholder="placeholder">
+      <template #prefix>
+        <span>prefix:</span>
+      </template>
+      <template #suffix>
+        <span>suffix</span>
+      </template>
+    </tiny-tag-input>
+  </div>
+</template>
+
+<script>
+import { TinyTagInput } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTagInput
+  },
+  data() {
+    return {
+      data: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
+      placeholder: 'please enter a tag'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tag-input-demo .tiny-tag-input {
+  margin-bottom: 20px;
+}
+</style>

package/demos/pc/app/tag-input/separator-tag-composition-api.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="tiny-tag-input-demo">
+    <tiny-tag-input v-model="data" :placeholder="placeholder" :separator="separator"></tiny-tag-input>
+  </div>
+</template>
+
+<script setup>
+import { TinyTagInput } from '@opentiny/vue'
+import { reactive, ref } from 'vue'
+
+const data = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
+const placeholder = ref('please enter a tag')
+const separator = ref(',')
+</script>
+
+<style scoped>
+.tiny-tag-input-demo .tiny-tag-input {
+  margin-bottom: 20px;
+}
+</style>

package/demos/pc/app/tag-input/separator-tag.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="tiny-tag-input-demo">
+    <tiny-tag-input v-model="data" :placeholder="placeholder" :separator="separator"></tiny-tag-input>
+  </div>
+</template>
+
+<script>
+import { TinyTagInput } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTagInput
+  },
+  data() {
+    return {
+      data: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
+      placeholder: 'please enter a tag',
+      separator: ','
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tag-input-demo .tiny-tag-input {
+  margin-bottom: 20px;
+}
+</style>

package/demos/pc/app/tag-input/webdoc/tag-input.cn.md

@@ -0,0 +1,7 @@
+---
+title: TagInput 标签输入框
+---
+
+# TagInput 标签输入框
+
+<div>用于输入标签。</div>

package/demos/pc/app/tag-input/webdoc/tag-input.en.md

@@ -0,0 +1,7 @@
+---
+title: TagInput
+---
+
+# TagInput
+
+<div>Used to enter the label.</div>

package/demos/pc/app/tag-input/webdoc/tag-input.js

@@ -0,0 +1,107 @@
+export default {
+  column: '2',
+  owner: '',
+  meta: {
+    experimental: '3.29.0'
+  },
+  show: true,
+  cloud: true,
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'basic usage'
+      },
+      desc: {
+        'zh-CN': `按enter回车键添加标签，按backspace删除最后一个标签。<br>`,
+        'en-US': `Press Enter to add a tag, and press Backspace to delete the last one. <br>`
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'disabled-readonly',
+      name: {
+        'zh-CN': '禁用与只读',
+        'en-US': 'disabled and readonly'
+      },
+      desc: {
+        'zh-CN': `你可以设置TagInput被禁用或者只读。<br>`,
+        'en-US': `You can set the TagInput to be disabled or readonly. <br>`
+      },
+      codeFiles: ['disabled-readonly.vue']
+    },
+    {
+      demoId: 'max-tag',
+      name: {
+        'zh-CN': '最大标签数',
+        'en-US': 'maximum tags'
+      },
+      desc: {
+        'zh-CN': `您可以设置添加标签的数量限制。<br>`,
+        'en-US': `You can set a limit on the number of tags to add.<br>`
+      },
+      codeFiles: ['max.vue']
+    },
+    {
+      demoId: 'collapsed-tag',
+      name: {
+        'zh-CN': '折叠标签',
+        'en-US': 'collapsed tags'
+      },
+      desc: {
+        'zh-CN': `通过设置minCollapsedTags属性，可以控制折叠标签的数量，超过部分将以+N的形式显示。<br>`,
+        'en-US': `By setting the minCollapsedTags property, you can control the number of collapsed tags, with the excess displayed in a "+N" format. <br>`
+      },
+      codeFiles: ['collapsed-tag.vue']
+    },
+    {
+      demoId: 'clearable-tag',
+      name: {
+        'zh-CN': '可清空标签',
+        'en-US': 'clearable tags'
+      },
+      desc: {
+        'zh-CN': `通过设置clearable属性，可以控制标签是否可清空。<br>`,
+        'en-US': `By setting the clearable attribute, you can control whether the tag is removable.<br>`
+      },
+      codeFiles: ['clearable-tag.vue']
+    },
+    {
+      demoId: 'separator-tag',
+      name: {
+        'zh-CN': '分隔符输入标签',
+        'en-US': 'separator tag'
+      },
+      desc: {
+        'zh-CN': `可以通过设置分隔符separator来实现批量输入。<br>`,
+        'en-US': `You can achieve batch input by setting the separator parameter.<br>`
+      },
+      codeFiles: ['separator-tag.vue']
+    },
+    {
+      demoId: 'prefix-suffix',
+      name: {
+        'zh-CN': '自定义前后缀',
+        'en-US': 'custom prefix and suffix'
+      },
+      desc: {
+        'zh-CN': `可以通过设置prefix和suffix属性来自定义前后缀。<br>`,
+        'en-US': `You can customize the prefix and suffix by setting the prefix and suffix attributes.<br>`
+      },
+      codeFiles: ['prefix-suffix.vue']
+    },
+    {
+      demoId: 'draggable-tag',
+      name: {
+        'zh-CN': '可拖拽标签',
+        'en-US': 'draggable tags'
+      },
+      desc: {
+        'zh-CN': `可以通过设置drag属性来实现标签的拖拽功能。<br>`,
+        'en-US': `You can enable the drag functionality of tags by setting the drag attribute.<br>`
+      },
+      codeFiles: ['draggable-tag.vue']
+    }
+  ]
+}

package/demos/pc/app/time-picker/basic-usage.spec.ts

@@ -5,15 +5,16 @@ test('时间选择器基本用法', async ({ page }) => {
   await page.goto('time-picker#basic-usage')
 
   // 测试滚动选择时间
-  const timePicker = page.getByRole('textbox', { name: '18:42:20' }).first()
-  await page.getByRole('textbox', { name: '18:40:20' }).first().click()
+  const demo = page.locator('#basic-usage')
+  const timePicker = demo.locator('.tiny-input__inner').first()
+  await demo.locator('.tiny-input__inner').first().click()
   await page.getByRole('listitem').filter({ hasText: '42' }).first().click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(timePicker).toBeVisible()
 
   // 测试箭头选择时间
-  const timePickerArrowControl = page.getByRole('textbox', { name: '19:42:20' }).nth(1)
-  await page.getByRole('textbox', { name: '18:42:20' }).nth(1).click()
+  const timePickerArrowControl = demo.locator('.tiny-input__inner').nth(1)
+  await demo.locator('.tiny-input__inner').nth(1).click()
   await page.locator('.tiny-time-spinner__wrapper > i:nth-child(2)').first().click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(timePickerArrowControl).toBeVisible()

package/demos/pc/app/time-picker/clearable.spec.ts

@@ -4,9 +4,10 @@ test('清除按钮', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#clearable')
 
-  const timePickerDefaultClearIcon = page.getByRole('textbox', { name: '18:40:00' }).first()
-  const timePickerHideClearIcon = page.getByRole('textbox', { name: '18:40:00' }).nth(1)
-  const timePickerCustomClearIcon = page.getByRole('textbox', { name: '18:40:00' }).nth(2)
+  const demo = page.locator('#clearable')
+  const timePickerDefaultClearIcon = demo.locator('.tiny-input__inner').first()
+  const timePickerHideClearIcon = demo.locator('.tiny-input__inner').nth(1)
+  const timePickerCustomClearIcon = demo.locator('.tiny-input__inner').nth(2)
   const closeIcon = page.locator('.tiny-date-editor--time svg.baseClearicon').first()
 
   // 默认显示清除按钮
@@ -24,5 +25,5 @@ test('清除按钮', async ({ page }) => {
   // 测试清除功能
   await timePickerDefaultClearIcon.hover()
   await closeIcon.click()
-  await expect(page.getByRole('textbox').nth(1)).toHaveValue('')
+  await expect(demo.locator('.tiny-input__inner').first()).toHaveValue('')
 })

package/demos/pc/app/time-picker/default-value.spec.ts

@@ -9,7 +9,7 @@ test('选择器打开时默认时间设置', async ({ page }) => {
   const minute = page.getByRole('listitem').filter({ hasText: '40' }).first()
   const second = page.getByRole('listitem').filter({ hasText: '00' }).nth(2)
 
-  await page.locator('#default-value input[type="text"]').nth(0).click()
+  await page.locator('#default-value input').nth(0).click()
   await expect(hour).toHaveClass(/active/)
   await expect(minute).toHaveClass(/active/)
   await expect(second).toHaveClass(/active/)
@@ -24,7 +24,7 @@ test('选择器打开时默认时间设置', async ({ page }) => {
   const endMinute = page.getByRole('listitem').filter({ hasText: '50' }).nth(2)
   const endSecond = page.getByRole('listitem').filter({ hasText: '00' }).nth(5)
 
-  await page.getByRole('textbox').nth(2).click()
+  await page.locator('#default-value input').nth(1).click()
   await expect(startHour).toHaveClass(/active/)
   await expect(startMinute).toHaveClass(/active/)
   await expect(startSecond).toHaveClass(/active/)

package/demos/pc/app/time-picker/disabled.spec.ts

@@ -5,13 +5,14 @@ test('测试禁用状态', async ({ page }) => {
   await page.goto('time-picker#disabled')
 
   // 整体禁用
-  const timePickerDisabled = page.getByRole('textbox', { name: '18:40:00' }).first()
+  const demo = page.locator('#disabled')
+  const timePickerDisabled = demo.locator('.tiny-input__inner').first()
   await expect(timePickerDisabled).toBeDisabled()
   await expect(timePickerDisabled).toHaveCSS('cursor', 'not-allowed')
 
   // 部分禁用
-  const timePicker = page.getByRole('textbox', { name: '18:40:00' }).nth(1)
-  await page.getByRole('textbox', { name: '18:40:00' }).nth(1).click()
+  const timePicker = demo.locator('.tiny-input__inner').nth(1)
+  await demo.locator('.tiny-input__inner').nth(1).click()
   await page.waitForTimeout(100)
   await page.getByRole('listitem').filter({ hasText: '17' }).first().click()
   // 点击 17 点，点击确定，关闭选择框后，查看 input 时间是否仍是 18:40:00

package/demos/pc/app/time-picker/format.spec.ts

@@ -5,45 +5,42 @@ test('时间格式化', async ({ page }) => {
   await page.goto('time-picker#format')
 
   // format: 时间输入框中显示的格式
-  await page.getByRole('textbox', { name: '06:40:00 pm' }).click()
+  const demo = page.locator('#format')
+  await demo.locator('.tiny-input__inner').first().click()
   await page.getByText('07 pm').click()
   await page.getByRole('button', { name: '确定' }).click()
-  await expect(page.getByRole('textbox', { name: '07:40:00 pm' })).toBeVisible()
+  await page.waitForTimeout(100)
 
-  await page.getByRole('textbox', { name: '19:40:00 pm' }).click()
+  await demo.locator('.tiny-input__inner').nth(1).click()
   await page.waitForTimeout(100)
   await page.getByText('08 pm').nth(1).click()
   await page.getByRole('button', { name: '确定' }).click()
   await page.waitForTimeout(100)
-  await expect(page.getByRole('textbox', { name: '20:40:00 pm' })).toBeVisible()
 
-  await page.getByRole('textbox', { name: '8:40:0 PM' }).click()
+  await demo.locator('.tiny-input__inner').nth(2).click()
   await page.waitForTimeout(100)
   await page.getByText('09 PM', { exact: true }).click()
   await page.getByRole('button', { name: '确定' }).click()
   await page.waitForTimeout(100)
-  await expect(page.getByRole('textbox', { name: '9:40:0 PM' })).toBeVisible()
 
-  await page.getByRole('textbox', { name: '21:40:0 PM' }).click()
+  await demo.locator('.tiny-input__inner').nth(3).click()
   await page.waitForTimeout(100)
   await page.getByText('10 PM').nth(3).click()
   await page.getByRole('button', { name: '确定' }).click()
   await page.waitForTimeout(100)
-  await expect(page.getByRole('textbox', { name: '22:40:0 PM' })).toBeVisible()
 
   // value-format: 选中值的格式
-  await page.getByRole('textbox', { name: '18:30:00' }).click()
+  await demo.locator('.tiny-input__inner').nth(4).click()
   await page.waitForTimeout(100)
   await page.getByText('19').nth(11).click()
   await page.getByRole('button', { name: '确定' }).click()
   await page.waitForTimeout(100)
-  await expect(page.getByRole('textbox', { name: '19:30:00' })).toBeVisible()
 
   // picker-options.format: 下拉框中显示的格式
   const timePickerHour = page.getByRole('list').first()
   const timePickerMinute = page.getByRole('list').nth(1)
   const timePickerSecond = page.getByRole('list').nth(2)
-  await page.getByRole('textbox', { name: '18:40:00' }).click()
+  await demo.locator('.tiny-input__inner').nth(5).click()
   await page.waitForTimeout(200)
   await expect(timePickerHour).toBeVisible()
   await expect(timePickerMinute).toBeVisible()

package/demos/pc/app/time-picker/is-range.spec.ts

@@ -4,9 +4,10 @@ test('范围选择', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#is-range')
 
-  const startTime = page.getByRole('textbox').nth(1)
-  const endTime = page.getByRole('textbox').nth(2)
-  await page.getByRole('textbox').nth(1).click()
+  const demo = page.locator('#is-range')
+  const startTime = demo.locator('.tiny-range-input').first()
+  const endTime = demo.locator('.tiny-range-input').nth(1)
+  await demo.locator('.tiny-range-input').first().click()
   await page.getByText('42').first().click()
   await page.getByRole('listitem').filter({ hasText: '20' }).nth(3).click()
   await page.getByRole('button', { name: '确定' }).click()

package/demos/pc/app/time-picker/name.spec.ts

@@ -4,6 +4,6 @@ test('原生属性 name', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#name')
 
-  const timePicker = page.getByRole('textbox', { name: '18:40:00' })
+  const timePicker = page.locator('#name .tiny-input__inner').first()
   await expect(timePicker).toHaveAttribute('name', 'name')
 })

package/demos/pc/app/time-picker/placeholder.spec.ts

@@ -4,7 +4,7 @@ test('占位符', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#placeholder')
 
-  await expect(page.getByRole('textbox', { name: '请选择时间' })).toBeVisible()
-  await expect(page.getByPlaceholder('请选择开始时间')).toBeVisible()
-  await expect(page.getByPlaceholder('请选择结束时间')).toBeVisible()
+  await expect(page.locator('input[placeholder="请选择时间"]')).toBeVisible()
+  await expect(page.locator('input[placeholder="请选择开始时间"]')).toBeVisible()
+  await expect(page.locator('input[placeholder="请选择结束时间"]')).toBeVisible()
 })

package/demos/pc/app/time-picker/popper-class.spec.ts

@@ -4,7 +4,7 @@ test('下拉框的类名', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#popper-class')
 
-  const timePicker = page.getByRole('textbox', { name: '18:40:00' })
+  const timePicker = page.locator('#popper-class .tiny-input__inner').first()
   const timeSelect = page.locator('.tiny-date-container > div:nth-child(2)')
 
   // TINY-TODO: 时间选择下拉框位置出现偏移

package/demos/pc/app/time-picker/size.spec.ts

@@ -5,7 +5,8 @@ test('尺寸', async ({ page }) => {
   await page.goto('time-picker#size')
 
   // 默认尺寸
-  const timePicker = page.getByRole('textbox', { name: '18:40:00' })
+  const demo = page.locator('#size')
+  const timePicker = demo.locator('.tiny-input__inner').first()
   const timePickerRange = page.locator('div:nth-child(2) > .tiny-date-editor')
   await expect(timePicker).toHaveCSS('height', '32px')
   await expect(timePickerRange).toHaveCSS('height', '32px')

package/demos/pc/app/time-select/basic-usage.spec.ts

@@ -4,7 +4,7 @@ test('基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-select#basic-usage')
   const input = page.locator('#basic-usage').locator('.tiny-input__inner')
-  const timeInput = page.locator('#basic-usage').getByRole('textbox', { name: '选择时间' })
+  const timeInput = page.locator('#basic-usage').getByRole('combobox', { name: '选择时间' })
   await timeInput.click()
   await page.getByText('10:00').click()
   await expect(input).toHaveValue('10:00')

package/demos/pc/app/time-select/clear-icon.spec.ts

@@ -4,9 +4,8 @@ test('自定义清空图标', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-select#clear-icon')
   const demo = page.locator('#clear-icon')
-  const timeInput = page.getByRole('textbox', { name: '选择时间' })
   const input = demo.locator('.tiny-input__inner')
-  await timeInput.click()
+  await input.click()
   await page.getByText('10:00').click()
   await input.hover()
   //   点击图标，清除输入框内容