@opentiny/vue-docs 3.28.1 → 3.30.0

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

@@ -0,0 +1,257 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基础用法',
+        'en-US': 'Basic Usage'
+      },
+      desc: {
+        'zh-CN': ' 通过 items 配置搜索数据项。 ',
+        'en-US': ' Configure search data items through  items . '
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'append-to-body',
+      name: {
+        'zh-CN': '挂载到 body',
+        'en-US': 'Append to Body'
+      },
+      desc: {
+        'zh-CN': ' 通过 append-to-body 配置将下拉面板挂载到 body。 ',
+        'en-US': ' Use  append-to-body  to configure the drop-down panel to be mounted to the body. '
+      },
+      codeFiles: ['append-to-body.vue']
+    },
+    {
+      demoId: 'panel-max-height',
+      name: {
+        'zh-CN': '面板最大高度',
+        'en-US': 'Maximum panel height'
+      },
+      desc: {
+        'zh-CN': ' 通过 panel-max-height 配置下拉面板最大高度。 ',
+        'en-US': ' Set  panel-max-height  to configure the maximum height of the drop-down list box. '
+      },
+      codeFiles: ['panel-max-height.vue']
+    },
+    {
+      demoId: 'split-input-value',
+      name: {
+        'zh-CN': '切分输入值',
+        'en-US': 'Segmentation Input Value'
+      },
+      desc: {
+        'zh-CN': ` 通过 split-input-value='|' 将输入值按字符 | 分成多个关键字，一次性输入生成多个标签，默认 , 分隔。 `,
+        'en-US': ` Use  split-input-value='|'  to split the input value into multiple keywords by  | . Multiple tags are generated for one input. By default,  ,  is used to separate multiple keywords. `
+      },
+      codeFiles: ['split-input-value.vue']
+    },
+    {
+      demoId: 'default-field',
+      name: {
+        'zh-CN': '自定义默认搜索项',
+        'en-US': 'Customizing Default Search Terms'
+      },
+      desc: {
+        'zh-CN': ' 通过  default-field  配置按照可用地区进行搜索。 ',
+        'en-US': ' Set  default-field  to search by available region. '
+      },
+      codeFiles: ['default-field.vue']
+    },
+    {
+      demoId: 'v-model',
+      name: {
+        'zh-CN': '默认包含筛选项',
+        'en-US': 'Filter Items Are Included By Default'
+      },
+      desc: {
+        'zh-CN': ' 通过 model-value 配置默认选中标签项。 ',
+        'en-US': ' Use  model-value  to configure the default selected label item. '
+      },
+      codeFiles: ['v-model.vue']
+    },
+    {
+      demoId: 'empty-placeholder',
+      name: {
+        'zh-CN': '没有筛选项时的占位文本',
+        'en-US': 'Placeholder Text When There Are No Filters.'
+      },
+      desc: {
+        'zh-CN': ' 通过 empty-placeholder 配置筛选项为空时占位文本。 ',
+        'en-US': ' Use  empty-placeholder  to configure the placeholder text when the filter item is empty. '
+      },
+      codeFiles: ['empty-placeholder.vue']
+    },
+    {
+      demoId: 'id-map-key',
+      name: {
+        'zh-CN': '指定筛选项的ID键取值',
+        'en-US': 'Specifies the ID key value of a filtering item'
+      },
+      desc: {
+        'zh-CN': ` 通过 id-map-key 配置用来识别筛选项的 id 键取值来源，默认取自 items 的 id 键，
+                一般用于接口返回的 items 数据字段不匹配，但是又需要其中一个键值来识别筛选项的情况。 `,
+        'en-US': ` Use  id-map-key  to configure the value source of the  id  key used to identify screening items. The default value is the  id  key of  items . 
+                Generally, the  items  data field returned by the interface does not match, but a key value is required to identify the filtering item. `
+      },
+      codeFiles: ['id-map-key.vue']
+    },
+    {
+      demoId: 'potential-options',
+      name: {
+        'zh-CN': '潜在匹配项',
+        'en-US': 'Potential Match'
+      },
+      desc: {
+        'zh-CN': ' 通过 potential-options 配置潜在匹配项。 ',
+        'en-US': ' Use  potential-options  to configure potential matches. '
+      },
+      codeFiles: ['potential-match.vue']
+    },
+    {
+      demoId: 'group-key',
+      name: {
+        'zh-CN': '自定义属性分组',
+        'en-US': 'User-defined attribute group'
+      },
+      desc: {
+        'zh-CN': ' 通过  item.groupKey   自定义一级下拉框属性分组。 ',
+        'en-US': '  '
+      },
+      codeFiles: ['group-key.vue', 'group-key-data.ts']
+    },
+    {
+      demoId: 'help',
+      name: {
+        'zh-CN': 'help 提示场景',
+        'en-US': 'Help Prompt Scenario'
+      },
+      desc: {
+        'zh-CN': ' 通过 show-help 控制帮助图标显隐，使用 help 事件回调自定义弹窗提示内容。 ',
+        'en-US':
+          ' Use  show-help  to show or hide the help icon, and use the  help  event callback to customize the pop-up window content. '
+      },
+      codeFiles: ['help.vue']
+    },
+    {
+      demoId: 'editable',
+      name: {
+        'zh-CN': '可编辑',
+        'en-US': 'Editable'
+      },
+      desc: {
+        'zh-CN': ' 标签支持可编辑功能，通过  editable   打开编辑功能，（注：map 类型不支持编辑）。 ',
+        'en-US': ' Tags can be edited. To edit a tag, enter  editable  . Tags of the map type cannot be edited. '
+      },
+      codeFiles: ['editable.vue', 'editable-data.ts']
+    },
+    {
+      demoId: 'item-placeholder',
+      name: {
+        'zh-CN': '数据项占位文本',
+        'en-US': 'Data Item Placeholder Text'
+      },
+      desc: {
+        'zh-CN': ' 通过   item.placeholder  设置占位文本，  item.editAttrDisabled  设置编辑状态下此属性类型不可切换。 ',
+        'en-US':
+          ' Set the placeholder text through   item.placeholder  ,   item.editAttrDisabled   This attribute type cannot be switched in the editing state. '
+      },
+      codeFiles: ['item-placeholder.vue']
+    },
+    {
+      demoId: 'auto-match',
+      name: {
+        'zh-CN': '自动匹配',
+        'en-US': 'Automatic Matching'
+      },
+      desc: {
+        'zh-CN':
+          ' 内置自动匹配功能，通过 :show-no-data-tip="false" 隐藏面板的无数据提示，通过 search 监听搜索事件， change 监听搜索值变化事件。 ',
+        'en-US':
+          ' Built-in auto-matching function. No Data Prompt for Hiding Panels via  :show-no-data-tip="false" . Use  search  to listen to search events and  change  to listen to search value change events. '
+      },
+      codeFiles: ['auto-match.vue']
+    },
+    {
+      demoId: 'merge-tag',
+      name: {
+        'zh-CN': '合并多选标签',
+        'en-US': 'Merge Multiple Selection Labels'
+      },
+      desc: {
+        'zh-CN': ' 通过  mergeTag   合并多选标签，（注：仅多选标签支持合并功能）。 ',
+        'en-US': ' Use   mergeTag   to merge multiple tags. (Note: Only multiple tags can be merged.) '
+      },
+      codeFiles: ['merge-tag.vue']
+    },
+    {
+      demoId: 'max-length',
+      name: {
+        'zh-CN': '输入长度限制',
+        'en-US': 'Input Length Limit'
+      },
+      desc: {
+        'zh-CN': ' 通过  maxlength   原生属性限制输入不超过8个字符长度，配合  exceed  监听输入超出限定长度的事件。 ',
+        'en-US':
+          ' The   maxlength   native attribute is used to restrict the input to a maximum of eight characters. This attribute is used together with   exceed   to listen to the event that the input exceeds the specified length. '
+      },
+      codeFiles: ['max-length.vue']
+    },
+    {
+      demoId: 'max-time-length',
+      name: {
+        'zh-CN': '时间长度限制',
+        'en-US': 'Time Length Limit'
+      },
+      desc: {
+        'zh-CN':
+          ' 通过  maxTimeLength   传入某段时间的值（毫秒数），来限制可选择的时间跨度，常用于防止请求时间跨度过大的情形。 ',
+        'en-US':
+          ' Use   maxTimeLength   to pass in the value (in milliseconds) of a time period to limit the time span that can be selected. This is often used to prevent the request time span from being too large. '
+      },
+      codeFiles: ['max-time-length.vue']
+    },
+    {
+      demoId: 'custom-panel',
+      name: {
+        'zh-CN': '自定义二级下拉面板',
+        'en-US': 'Customizing the Level-2 Drop-down Panel'
+      },
+      desc: {
+        'zh-CN':
+          " 通过  item.type = 'custom'   开启自定义二级下拉面板功能，并在 item.slotName  自定义对应的二级面板插槽名，对应的编辑态自定义面板插槽名为 `${item.slotName}-edit` 。 ",
+        'en-US':
+          " Use  item.type = 'custom'  to enable the function of customizing the level-2 drop-down panel and customize the slot name of the level-2 panel in  item.slotName . The slot name of the corresponding customized panel in editing state is  `${item.slotName}-edit` . "
+      },
+      codeFiles: ['custom-panel.vue']
+    },
+    {
+      demoId: 'events',
+      name: {
+        'zh-CN': '事件',
+        'en-US': 'Events'
+      },
+      desc: {
+        'zh-CN': ' 通过  first-level-select   监听第一层级选择事件。 ',
+        'en-US': ' Listen to the first-level selection event through   first-level-select  . '
+      },
+      codeFiles: ['events.vue']
+    },
+    {
+      demoId: 'suffix-icon',
+      name: {
+        'zh-CN': '后缀图标',
+        'en-US': 'Suffix Icon'
+      },
+      desc: {
+        'zh-CN': ' 通过  suffix-icon   配置后缀图标。 ',
+        'en-US': ' Use   suffix-icon   to configure the suffix icon. '
+      },
+      codeFiles: ['suffix-icon.vue']
+    }
+  ]
+}

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

@@ -10,7 +10,7 @@ test('多选复制单个标签', async ({ page }) => {
 
   await expect(tag).toContainText('北京')
   await page.waitForTimeout(200)
-  const tagBox = await tag.locator('span').boundingBox()
+  const tagBox = await tag.locator('span').first().boundingBox()
   const x = tagBox.x + tagBox.width
   const y = tagBox.y + tagBox.height - 5
 

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

@@ -10,7 +10,8 @@ test('多选复制单个标签', async ({ page }) => {
 
   await expect(tag).toContainText('北京')
   await page.waitForTimeout(200)
-  const tagBox = await tag.locator('span').boundingBox()
+  // 用 getByText 精确定位文本，.first() 避免多个 span 含相同文本导致 strict mode 冲突
+  const tagBox = await tag.getByText('北京').first().boundingBox()
   const x = tagBox.x + tagBox.width
   const y = tagBox.y + tagBox.height - 5
 

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

@@ -29,8 +29,8 @@ test('基本用法', async ({ page }) => {
   await expect(item1).toHaveCSS('color', 'rgb(25, 25, 25)')
   await expect(content).toHaveText(/表单组件/)
 
-  // 禁用
-  await item2.click()
+  // 禁用 - 使用 force: true 因为元素有 aria-disabled="true"
+  await item2.click({ force: true })
   await expect(item1).toHaveClass(/is-active/)
   await expect(content).toHaveText(/表单组件/)
 })

package/demos/pc/app/tabs/more-show-all.spec.ts

@@ -5,7 +5,8 @@ test('超长数据下拉展示全部，面板长宽可控', async ({ page }) =>
   await page.goto('tabs#more-show-all')
 
   const container = page.locator('#more-show-all')
-  const showMoreBtn = container.getByRole('button')
+  // 使用更具体的选择器避免与滚动按钮冲突
+  const showMoreBtn = container.getByRole('button', { name: 'down' })
   const triggerBtn = container.locator('.tiny-tabs__more-container .tiny-dropdown__trigger.tiny-dropdown-trigger')
   const panel = page.locator('.tiny-tabs__more-dropdown')
 

package/demos/pc/app/tabs/tabs-events-close-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-tabs v-model="activeName" tab-style="card" :with-close="true" :before-close="beforeClose" @close="close">
+  <tiny-tabs v-model="activeName" :with-close="true" :before-close="beforeClose" @close="close">
     <tiny-tab-item
       :key="item.name"
       v-for="item in tabs"
@@ -14,7 +14,7 @@
 
 <script setup lang="jsx">
 import { ref, getCurrentInstance } from 'vue'
-import { TinyTabs, TinyTabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, TinyNotify } from '@opentiny/vue'
 
 const activeName = ref('first')
 const tabs = ref([
@@ -49,6 +49,12 @@ const instance = getCurrentInstance()
 const { $message } = instance.appContext.config.globalProperties
 
 function beforeClose(name) {
+  TinyNotify({
+    type: 'info',
+    title: 'beforeClose 事件',
+    message: '当前设置的beforeClose事件只能关闭标签页“其他组件”，点击其他标签页的关闭按钮将无法关闭。',
+    position: 'top-right'
+  })
   // 只能关闭标签页“其他组件”
   return name === 'fifth'
 }

package/demos/pc/app/tabs/tabs-events-close.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-tabs v-model="activeName" tab-style="card" :with-close="true" :before-close="beforeClose" @close="close">
+  <tiny-tabs v-model="activeName" :with-close="true" :before-close="beforeClose" @close="close">
     <tiny-tab-item
       :key="item.name"
       v-for="item in tabs"
@@ -13,7 +13,7 @@
 </template>
 
 <script lang="jsx">
-import { TinyTabs, TinyTabItem } from '@opentiny/vue'
+import { TinyTabs, TinyTabItem, Notify } from '@opentiny/vue'
 
 export default {
   components: {
@@ -55,6 +55,12 @@ export default {
   },
   methods: {
     beforeClose(name) {
+      Notify({
+        type: 'info',
+        title: 'beforeClose 事件',
+        message: '当前设置的beforeClose事件只能关闭标签页“其他组件”，点击其他标签页的关闭按钮将无法关闭。',
+        position: 'top-right'
+      })
       // 只能关闭标签页“其他组件”
       return name === 'fifth'
     },

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

@@ -4,7 +4,7 @@ test('配置式标签', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
   await page.goto('tag#basic-usage')
 
-  const tag = page.locator('.all-demos-container').getByText('配置式标签')
+  const tag = page.locator('span').filter({ hasText: '配置式标签' }).first()
 
   await expect(tag).toHaveCount(1)
 })

package/demos/pc/app/tag/color-border.spec.ts

@@ -5,8 +5,8 @@ test('边框和自定义背景色', async ({ page }) => {
   await page.goto('tag#color-border')
 
   const tags = page.locator('.all-demos-container').locator('.tiny-tag')
-  const red = tags.getByText('red 标签')
-  const custom = tags.getByText('自定义背景色', { exact: true })
+  const red = page.locator('span').filter({ hasText: 'red 标签' }).first()
+  const custom = page.locator('span').filter({ hasText: '自定义背景色' }).first()
 
   await expect(red).toHaveClass(/tiny-tag--red/)
   await expect(custom).toHaveCSS('background-color', 'rgba(82, 196, 26, 0.8)')

package/demos/pc/app/tag/max-width.spec.ts

@@ -4,7 +4,7 @@ test('测试最大宽度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
   await page.goto('tag#max-width')
 
-  const normal = page.getByText('文本超长超长的标签')
+  const normal = page.getByLabel('示例', { exact: true }).locator('span').first()
 
   await expect(normal).toHaveCSS('max-width', '80px')
 })

package/demos/pc/app/tag/size.spec.ts

@@ -4,9 +4,9 @@ test('各型号尺寸是否正常', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
   await page.goto('tag#size')
 
-  const normal = page.getByText('默认标签')
-  const medium = page.getByText('中等标签')
-  const small = page.getByText('小型标签')
+  const normal = page.locator('span').filter({ hasText: '默认标签' }).first()
+  const medium = page.locator('span').filter({ hasText: '中等标签' }).first()
+  const small = page.locator('span').filter({ hasText: '小型标签' }).first()
 
   await expect(normal).toHaveCSS('height', '24px')
   await expect(medium).toHaveCSS('height', '32px')

package/demos/pc/app/tag/slot-default.spec.ts

@@ -3,9 +3,9 @@ import { expect, test } from '@playwright/test'
 test('图标是否正常显示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
   await page.goto('tag#slot-default')
-
-  const left = page.locator('.tiny-tag > svg:nth-child(1)').first()
-  const right = page.locator('.tiny-tag > svg:nth-child(2)').first()
+  
+  const left = page.getByLabel('示例', { exact: true }).getByRole('img').first()
+  const right = page.getByLabel('示例', { exact: true }).getByRole('img').nth(2)
 
   await expect(left).toBeVisible()
   await expect(right).toBeVisible()

package/demos/pc/app/tag-group/basic-usage.spec.js

@@ -6,23 +6,23 @@ test('TagGroup 基础用法', async ({ page }) => {
 
   const tagGroup = page.locator('.tiny-tag-group')
 
-  const tag1 = tagGroup.getByText('标签一')
+  const tag1 = tagGroup.locator('.tiny-tag').nth(0)
   await expect(tag1).toHaveCSS('background-color', 'rgb(245, 245, 245)')
   await expect(tag1).toHaveCSS('color', 'rgb(25, 25, 25)')
 
-  const tag2 = tagGroup.getByText('标签二')
+  const tag2 = tagGroup.locator('.tiny-tag').nth(1)
   await expect(tag2).toHaveCSS('background-color', 'rgb(222, 236, 255)')
   await expect(tag2).toHaveCSS('color', 'rgb(20, 118, 255)')
 
-  const tag3 = tagGroup.getByText('标签三')
+  const tag3 = tagGroup.locator('.tiny-tag').nth(2)
   await expect(tag3).toHaveCSS('background-color', 'rgb(230, 242, 213)')
   await expect(tag3).toHaveCSS('color', 'rgb(92, 179, 0)')
 
-  const tag4 = tagGroup.getByText('标签四')
+  const tag4 = tagGroup.locator('.tiny-tag').nth(3)
   await expect(tag4).toHaveCSS('background-color', 'rgb(255, 235, 209)')
   await expect(tag4).toHaveCSS('color', 'rgb(255, 136, 0)')
 
-  const tag5 = tagGroup.getByText('标签五')
+  const tag5 = tagGroup.locator('.tiny-tag').nth(4)
   await expect(tag5).toHaveCSS('background-color', 'rgb(252, 227, 225)')
   await expect(tag5).toHaveCSS('color', 'rgb(242, 48, 48)')
 })

package/demos/pc/app/tag-group/tag-group-effect.spec.js

@@ -28,44 +28,44 @@ test('TagGroup 主题', async ({ page }) => {
   await expect(darkTag5).toHaveCSS('color', 'rgb(255, 255, 255)')
 
   // 浅色
-  const lightTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签一' })
+  const lightTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--medium.tiny-tag--light').filter({ hasText: '标签一' })
   await expect(lightTag1).toHaveCSS('background-color', 'rgb(245, 245, 245)')
   await expect(lightTag1).toHaveCSS('color', 'rgb(25, 25, 25)')
 
-  const lightTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签二' })
+  const lightTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--info.tiny-tag--medium.tiny-tag--light').filter({ hasText: '标签二' })
   await expect(lightTag2).toHaveCSS('background-color', 'rgb(222, 236, 255)')
   await expect(lightTag2).toHaveCSS('color', 'rgb(20, 118, 255)')
 
-  const lightTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签三' })
+  const lightTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--success.tiny-tag--medium.tiny-tag--light').filter({ hasText: '标签三' })
   await expect(lightTag3).toHaveCSS('background-color', 'rgb(230, 242, 213)')
   await expect(lightTag3).toHaveCSS('color', 'rgb(92, 179, 0)')
 
-  const lightTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签四' })
+  const lightTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--warning.tiny-tag--medium.tiny-tag--light').filter({ hasText: '标签四' })
   await expect(lightTag4).toHaveCSS('background-color', 'rgb(255, 235, 209)')
   await expect(lightTag4).toHaveCSS('color', 'rgb(255, 136, 0)')
 
-  const lightTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签五' })
+  const lightTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--danger.tiny-tag--medium.tiny-tag--light').filter({ hasText: '标签五' })
   await expect(lightTag5).toHaveCSS('background-color', 'rgb(252, 227, 225)')
   await expect(lightTag5).toHaveCSS('color', 'rgb(242, 48, 48)')
 
   // plain
-  const plainTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签一' })
+  const plainTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--medium.tiny-tag--plain').filter({ hasText: '标签一' })
   await expect(plainTag1).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(plainTag1).toHaveCSS('color', 'rgb(25, 25, 25)')
 
-  const plainTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签二' })
+  const plainTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--info.tiny-tag--medium.tiny-tag--plain').filter({ hasText: '标签二' })
   await expect(plainTag2).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(plainTag2).toHaveCSS('color', 'rgb(20, 118, 255)')
 
-  const plainTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签三' })
+  const plainTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--success.tiny-tag--medium.tiny-tag--plain').filter({ hasText: '标签三' })
   await expect(plainTag3).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(plainTag3).toHaveCSS('color', 'rgb(92, 179, 0)')
 
-  const plainTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签四' })
+  const plainTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--warning.tiny-tag--medium.tiny-tag--plain').filter({ hasText: '标签四' })
   await expect(plainTag4).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(plainTag4).toHaveCSS('color', 'rgb(255, 136, 0)')
 
-  const plainTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签五' })
+  const plainTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--danger.tiny-tag--medium.tiny-tag--plain').filter({ hasText: '标签五' })
   await expect(plainTag5).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(plainTag5).toHaveCSS('color', 'rgb(242, 48, 48)')
 })

package/demos/pc/app/tag-group/tag-group-event.spec.js

@@ -4,7 +4,7 @@ test('TagGroup 事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tag-group#tag-group-event')
 
-  const tag3 = page.locator('.tiny-tag ').filter({ hasText: '标签二' })
+  const tag3 = page.locator('.tiny-tag > span').filter({ hasText: '标签二' })
   await tag3.click()
 
   await expect(page.locator('.tiny-modal__box').filter({ hasText: '当前点击的是第 2 个标签' })).toBeVisible()

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

@@ -0,0 +1,29 @@
+<template>
+  <div class="tiny-tag-input-demo">
+    <tiny-tag-input v-model="data" :placeholder="placeholder"></tiny-tag-input>
+    <tiny-tag-input
+      v-model="data1"
+      :placeholder="placeholder"
+      tag-type="info"
+      tag-effect="light"
+      disabled
+    ></tiny-tag-input>
+    <tiny-tag-input v-model="data2" :placeholder="placeholder" tag-type="success" tag-effect="plain"></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 data1 = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
+const data2 = 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/basic-usage.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="tiny-tag-input-demo">
+    <tiny-tag-input v-model="data" :placeholder="placeholder"></tiny-tag-input>
+    <tiny-tag-input
+      v-model="data1"
+      :placeholder="placeholder"
+      tag-type="info"
+      tag-effect="light"
+      disabled
+    ></tiny-tag-input>
+    <tiny-tag-input v-model="data2" :placeholder="placeholder" tag-type="success" tag-effect="plain"></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'],
+      data2: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
+      maxTagCount: 3,
+      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/clearable-tag-composition-api.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="tiny-tag-input-demo">
+    <tiny-tag-input v-model="data" :placeholder="placeholder" clearable></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/clearable-tag.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="tiny-tag-input-demo">
+    <tiny-tag-input v-model="data" :placeholder="placeholder" clearable></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>