@opentiny/vue-docs 3.27.1 → 3.28.0

package/demos/mobile-first/app/tree-select/reference-style.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <p>场景 1：自定义图标 + 自定义样式</p>
+    <tiny-tree-select
+      v-model="value"
+      :tree-op="treeOp"
+      :dropdown-icon="tinyIconPopup"
+      :drop-style="{ width: '200px', 'min-width': '200px' }"
+    >
+    </tiny-tree-select>
+    <br />
+    <br />
+    <p>场景 2：标签类型</p>
+    <tiny-tree-select v-model="value2" :tree-op="treeOp" multiple tag-type="warning"></tiny-tree-select>
+  </div>
+</template>
+
+<script>
+import { TinyTreeSelect } from '@opentiny/vue'
+import { iconPopup } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyTreeSelect
+  },
+  data() {
+    return {
+      tinyIconPopup: iconPopup(),
+      value: '',
+      value2: [9],
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+[data-tag='tiny-base-select'],
+[data-tag='tiny-tree-select'] {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/tree-select/size.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <p>medium</p>
+    <tiny-tree-select v-model="value" size="medium" multiple :tree-op="treeOp"></tiny-tree-select>
+    <br />
+    <br />
+    <p>默认</p>
+    <tiny-tree-select v-model="value" multiple :tree-op="treeOp"></tiny-tree-select>
+    <br />
+    <br />
+    <p>small</p>
+    <tiny-tree-select v-model="value" size="small" multiple :tree-op="treeOp"> </tiny-tree-select>
+    <br />
+    <br />
+    <p>mini</p>
+    <tiny-tree-select v-model="value" size="mini" multiple :tree-op="treeOp"> </tiny-tree-select>
+  </div>
+</template>
+
+<script>
+import { TinyTreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect
+  },
+  data() {
+    return {
+      value: [9, 6],
+      treeOp: {
+        data: [
+          {
+            value: 1,
+            label: '一级 1',
+            children: [
+              {
+                value: 4,
+                label: '二级 1-1',
+                children: [
+                  {
+                    value: 9,
+                    label: '三级 1-1-1'
+                  },
+                  {
+                    value: 10,
+                    label: '三级 1-1-2'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 2,
+            label: '一级 2',
+            children: [
+              {
+                value: 5,
+                label: '二级 2-1'
+              },
+              {
+                value: 6,
+                label: '二级 2-2'
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+[data-tag='tiny-base-select'],
+[data-tag='tiny-tree-select'] {
+  width: 280px;
+}
+</style>

package/demos/mobile-first/app/tree-select/webdoc/tree-select.cn.md

@@ -0,0 +1,7 @@
+---
+title: TreeSelect 树形选择器
+---
+
+# TreeSelect 树形选择器
+
+结合了 BaseSelect 和 Tree 组件的选择器，用于从一个下拉树中选择一个或多个选项。

package/demos/mobile-first/app/tree-select/webdoc/tree-select.en.md

@@ -0,0 +1,7 @@
+---
+title: TreeSelect
+---
+
+# TreeSelect
+
+A selector that combines the BaseSelect and Tree components to select one or more options from a drop-down tree.

package/demos/mobile-first/app/tree-select/webdoc/tree-select.js

@@ -0,0 +1,220 @@
+export default {
+  column: '2',
+  owner: '',
+  show: true,
+  cloud: true,
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'Basic Usage'
+      },
+      desc: {
+        'zh-CN': '<p>最基础的用法，通过 <code>tree-op</code> 设置下拉树的数据源，<code>v-model</code> 设置绑定值。</p>',
+        'en-US': ''
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'multiple',
+      name: {
+        'zh-CN': '多选',
+        'en-US': 'Multiple'
+      },
+      desc: {
+        'zh-CN': `通过 <code>multiple</code> 属性启用多选功能，此时 <code>v-model</code> 的值为当前选中值所组成的数组，默认选中值会以标签形式展示。<br>`,
+        'en-US': `Use the <code>multiple</code> attribute to enable the multi-selection function. In this case, the value of <code>v-model</code> is an array of selected values. By default, the selected value is displayed as a tag.<br>`
+      },
+      codeFiles: ['multiple.vue']
+    },
+    {
+      demoId: 'collapse-tags',
+      name: {
+        'zh-CN': '折叠标签',
+        'en-US': 'Collapse tags'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>collapse-tags</code> 属性设置选中多个选项时，多个标签缩略展示。设置 <code>hover-expand</code> 为 <code>true</code> ，默认折叠标签，<code>hover</code> 时展示所有标签。标签内容超长时超出省略，<code>hover</code> 标签时展示 <code>tooltip</code> 。</p>\n',
+        'en-US':
+          '<p>When multiple options are selected through the <code>collapse-tags</code> attribute settings, multiple tags are displayed in a thumbnail. By setting <code>hover-expand</code> to <code>true</code> , the tags are collapsed by default, and all tags are displayed when hovering. If the content of the tag is too long, it should be omitted. When hovering the tag, a <code>tooltip</code> should be displayed</p>'
+      },
+      codeFiles: ['collapse-tags.vue']
+    },
+    {
+      demoId: 'size',
+      name: {
+        'zh-CN': '尺寸',
+        'en-US': 'Size'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>size</code> 属性设置输入框尺寸，可选值：medium / small / mini。</p>',
+        'en-US':
+          '<p>Set the input box size through the <code>size</code> attribute, with optional values of medium / small / mini.</p>'
+      },
+      codeFiles: ['size.vue']
+    },
+    {
+      demoId: 'disabled',
+      name: {
+        'zh-CN': '禁用',
+        'en-US': 'Disabled'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>disabled</code> 属性设置禁用状态。</p>\n',
+        'en-US':
+          '<p>Set the disabled status of the dropdown or dropdown item through the <code>disabled</code> attribute. </p>\n'
+      },
+      codeFiles: ['disabled.vue']
+    },
+    {
+      demoId: 'lazy',
+      name: {
+        'zh-CN': '懒加载',
+        'en-US': 'Lazy loading'
+      },
+      desc: {
+        'zh-CN':
+          '通过 <code>lazy</code> 属性，启用懒加载模式。<br>通过 <code>load</code> 函数属性，触发加载，初始会执行一次。<br>通过 <code>after-load</code> 函数属性，监听下级节点加载完毕的事件。'
+      },
+      codeFiles: ['lazy.vue']
+    },
+    {
+      demoId: 'map-field',
+      name: {
+        'zh-CN': '映射字段',
+        'en-US': 'Map Fields'
+      },
+      desc: {
+        'zh-CN': '通过 <code>text-field</code> 设置显示文本字段，<code>value-field</code>设置绑定值字段。',
+        'en-US':
+          '<p>Set the display text field by <code>text-field</code>, and set the binding value field by <code>value-field</code>. </p>\n'
+      },
+      codeFiles: ['map-field.vue']
+    },
+    {
+      demoId: 'reference-style',
+      name: {
+        'zh-CN': '触发源样式',
+        'en-US': 'Reference type'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>dropdown-icon</code> 属性可自定义下拉图标，<code>drop-style</code> 属性可自定义下拉选项样式，<code>tag-type</code> 属性设置标签类型（同 Tag 组件的 type 属性），<code>input-box-type</code> 属性设置输入框类型。</p>\n',
+        'en-US':
+          '<p>Set the label type through the <code>tag-type</code> attribute, which is the same as the type attribute of the Tag component. Optional values: success/info/warning/danger.</p>\n'
+      },
+      codeFiles: ['reference-style.vue']
+    },
+    {
+      demoId: 'panel-style',
+      name: {
+        'zh-CN': '下拉面板样式',
+        'en-US': 'Panel style'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>popper-append-to-body</code> 设置是否将弹框 dom 元素插入至 body 元素，默认为 true，<code>popper-class</code> 属性设置下拉弹框的类名，可自定义样式，<code>placement</code>设置弹出位置。</p>\n',
+        'en-US':
+          '<p>You can customize the style by setting the class name of the dropdown pop-up box through the <code>popper-class</code> attribute <code>placement</code> set the pop-up position <code>popper-append-to-body</code> set whether to insert the pop-up dom element into the body element, default to true. </p>\n'
+      },
+      codeFiles: ['panel-style.vue']
+    },
+    {
+      demoId: 'copy',
+      name: {
+        'zh-CN': '可复制',
+        'en-US': 'Copyable'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>copyable</code> 设置启用一键复制所有标签的文本内容并以逗号分隔，<code>text-split</code> 自定义复制文本的分隔符。</p>\n',
+        'en-US':
+          '<p>When setting radio searchable through the <code>allow-copy</code> attribute, the mouse can slide to select and copy the content of the input box. </p>\n'
+      },
+      codeFiles: ['copy.vue']
+    },
+    {
+      demoId: 'native-properties',
+      name: {
+        'zh-CN': '原生属性',
+        'en-US': 'Native properties'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>name</code> / <code>placeholder</code> / <code>autocomplete</code> 属性设置下拉组件内置 Input 的原生属性。</p>\n',
+        'en-US':
+          '<p>Set the native properties of the built-in Input in the dropdown component through the <code>name</code> / <code>placeholder</code> / <code>autocomplete</code> attribute settings.</p>\n'
+      },
+      codeFiles: ['native-properties.vue']
+    }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本功能',
+      support: {
+        value: true
+      },
+      description: '支持基本的树形选择功能，可通过 tree-op 设置数据源。',
+      cloud: {
+        value: true
+      },
+      apis: ['tree-op', 'v-model'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'multiple',
+      name: '多选',
+      support: {
+        value: true
+      },
+      description: '支持多选功能，选中值以标签形式展示。',
+      cloud: {
+        value: true
+      },
+      apis: ['multiple'],
+      demos: ['multiple']
+    },
+    {
+      id: 'size',
+      name: '尺寸',
+      support: {
+        value: true
+      },
+      description: '支持 medium、small、mini 三种尺寸。',
+      cloud: {
+        value: true
+      },
+      apis: ['size'],
+      demos: ['size']
+    },
+    {
+      id: 'disabled',
+      name: '禁用状态',
+      support: {
+        value: true
+      },
+      description: '支持禁用整个选择器。',
+      cloud: {
+        value: true
+      },
+      apis: ['disabled'],
+      demos: ['disabled']
+    },
+    {
+      id: 'field-mapping',
+      name: '字段映射',
+      support: {
+        value: true
+      },
+      description: '支持自定义显示文本字段和绑定值字段。',
+      cloud: {
+        value: true
+      },
+      apis: ['text-field', 'value-field'],
+      demos: ['map-field']
+    }
+  ]
+}

package/demos/mobile-first/menus.js

@@ -73,6 +73,20 @@ export const cmpMenus = [
       { name: 'Select', nameCn: '选择器', key: 'select' },
       { name: 'SelectMobile', nameCn: '面板选择器', key: 'select-mobile' },
       { name: 'SelectView', nameCn: '页面选择器', key: 'select-view' },
+      {
+        'name': 'BaseSelect',
+        'nameCn': '基础选择器',
+        'key': 'base-select'
+      },
+      {
+        name: 'GridSelect',
+        nameCn: '下拉表格选择器',
+        key: 'grid-select',
+        meta: {
+          experimental: '3.27.0'
+        }
+      },
+      { name: 'TreeSelect', nameCn: '树形选择器', key: 'tree-select' },
       { name: 'Slider', nameCn: '滑块', key: 'slider' },
       { name: 'SliderButton', nameCn: '滑动按钮组', key: 'slider-button' },
       { name: 'Switch', nameCn: '开关', key: 'switch' },

package/demos/pc/app/amount/custom-service.spec.js

@@ -8,11 +8,11 @@ test('自定义服务', async ({ page }) => {
   await page
     .locator('div')
     .filter({ hasText: /^币种MZNCNY$/ })
-    .getByRole('textbox')
+    .locator('input[type="text"]')
     .click()
-  await page.getByRole('listitem').filter({ hasText: /MZN/ }).locator('div').click()
-  await page.getByRole('tooltip', { name: '币种 MZN 金额 确定 重置' }).getByRole('textbox').nth(1).click()
-  await page.getByRole('tooltip', { name: '币种 MZN 金额 确定 重置' }).getByRole('textbox').nth(1).fill('100')
+  await page.getByLabel('MZN').locator('div').click()
+  await page.getByRole('tooltip', { name: '币种 MZN 金额 确定 重置' }).getByRole('textbox').click()
+  await page.getByRole('tooltip', { name: '币种 金额 确定 重置' }).getByRole('textbox').fill('100')
   await page.getByRole('button', { name: '确定' }).click()
   expect(await demo.locator('.reference-wrapper input').inputValue()).toEqual('$100.00')
 })

package/demos/pc/app/base-select/all-text.spec.ts

@@ -4,10 +4,10 @@ test('多选时自定义全部的文本', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('base-select#all-text')
   const wrap = page.locator('#all-text')
-  const select = wrap.locator('.tiny-base-select').nth(0)
+  const select = wrap.locator('.tiny-base-select')
   const dropdown = page.locator('body > .tiny-select-dropdown')
   const option = dropdown.locator('.tiny-option')
 
-  await select.locator('.tiny-input__suffix').click()
+  await select.click()
   await expect(option.filter({ hasText: '全部小吃' })).toHaveCount(1)
 })

package/demos/pc/app/base-select/allow-create.spec.ts

@@ -16,12 +16,12 @@ test('点击选中', async ({ page }) => {
   await input.dispatchEvent('keyup', { KeyboardEvent })
 
   await expect(input).toHaveValue('测试 allow-create')
-  await dropdown.getByRole('listitem').filter({ hasText: '测试 allow-create' }).click()
+  await dropdown.getByText('测试 allow-create').click()
   await expect(input).toHaveValue('测试 allow-create')
 
   await input.click()
   await expect(input).toHaveValue('')
-  await expect(dropdown.getByRole('listitem').filter({ hasText: '测试 allow-create' })).toHaveClass(/selected/)
+  await expect(dropdown.getByRole('option').filter({ hasText: '测试 allow-create' })).toHaveClass(/selected/)
 })
 
 test('enter 选中', async ({ page }) => {
@@ -46,5 +46,5 @@ test('enter 选中', async ({ page }) => {
   await input.click()
 
   await expect(input).toHaveValue('')
-  await expect(dropdown.getByRole('listitem').filter({ hasText: 'ab' })).toHaveClass(/selected/)
+  await expect(dropdown.getByRole('option').filter({ hasText: 'ab' })).toHaveClass(/selected/)
 })

package/demos/pc/app/base-select/automatic-dropdown.spec.ts

@@ -23,9 +23,9 @@ test('可搜索时，获取焦点自动下拉', async ({ page }) => {
 
   await wrap.getByRole('button').nth(1).click()
   // 聚焦下拉
-  await dropdown.getByRole('listitem').filter({ hasText: '上海' }).click()
+  await dropdown.getByRole('option').filter({ hasText: '上海' }).click()
   await expect(input).toHaveValue('上海')
   // 验证选中
   await input.click()
-  await expect(page.getByRole('listitem').filter({ hasText: '上海' })).toHaveClass(/selected/)
+  await expect(page.getByRole('option').filter({ hasText: '上海' })).toHaveClass(/selected/)
 })

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

@@ -12,8 +12,8 @@ test('基础用法标签式', async ({ page }) => {
   await input.click()
   await option.filter({ hasText: '天津' }).click()
   await expect(input).toHaveValue('天津')
-  await select.locator('.tiny-input__suffix svg').click()
-  await expect(page.getByRole('listitem').filter({ hasText: '天津' })).toHaveClass(/selected/)
+  await input.click()
+  await expect(page.getByRole('option').filter({ hasText: '天津' })).toHaveClass(/selected/)
   await option.filter({ hasText: '深圳' }).click()
   await expect(input).toHaveValue('深圳')
   await input.click()
@@ -35,8 +35,8 @@ test('基础用法配置式', async ({ page }) => {
   await input.click()
   await option.filter({ hasText: '天津' }).click()
   await expect(input).toHaveValue('天津')
-  await select.locator('.tiny-input__suffix svg').click()
-  await expect(page.getByRole('listitem').filter({ hasText: '天津' })).toHaveClass(/selected/)
+  await input.click()
+  await expect(page.getByRole('option').filter({ hasText: '天津' })).toHaveClass(/selected/)
   await option.filter({ hasText: '深圳' }).click()
   await expect(input).toHaveValue('深圳')
   await input.click()

package/demos/pc/app/base-select/binding-obj.spec.ts

@@ -10,12 +10,12 @@ test('binding-obj', async ({ page }) => {
   const valueLocator = wrap.locator('.value')
 
   await input.click()
-  await dropdown.getByRole('listitem').filter({ hasText: '重庆' }).click()
+  await dropdown.getByRole('option').filter({ hasText: '重庆' }).click()
   await expect(input).toHaveValue('重庆')
   await expect(valueLocator).toHaveText('{ "val": "选项 4", "id": 4 }')
 
   await input.click()
-  await dropdown.getByRole('listitem').filter({ hasText: '天津' }).click()
+  await dropdown.getByRole('option').filter({ hasText: '天津' }).click()
   await expect(input).toHaveValue('天津')
   await expect(valueLocator).toHaveText('{ "val": "选项 3", "id": 3 }')
 })

package/demos/pc/app/base-select/cache-usage.spec.ts

@@ -10,10 +10,10 @@ test('cache-op', async ({ page }) => {
   const cacheValue = wrap.locator('.cache-value')
 
   await input.click()
-  await dropdown.getByRole('listitem').filter({ hasText: '北京' }).click()
+  await dropdown.getByRole('option').filter({ hasText: '北京' }).click()
   await expect(cacheValue).toContainText(['选项 1'])
 
   await input.click()
-  await dropdown.getByRole('listitem').filter({ hasText: '上海' }).click()
+  await dropdown.getByRole('option').filter({ hasText: '上海' }).click()
   await expect(cacheValue).toContainText(['选项 2'])
 })

package/demos/pc/app/base-select/clearable.spec.ts

@@ -15,7 +15,7 @@ test('clearable', async ({ page }) => {
   await icon.click()
   await expect(input).toHaveValue('')
   // 验证选中
-  await icon.click()
-  await dropdown.getByRole('listitem').filter({ hasText: '上海' }).click()
+  await input.click()
+  await dropdown.getByRole('option').filter({ hasText: '上海' }).click()
   await expect(input).toHaveValue('上海')
 })

package/demos/pc/app/base-select/input-box-type.spec.ts

@@ -14,7 +14,6 @@ test('下划线默认', async ({ page }) => {
   await expect(input).toHaveCSS('border-left-width', '0px')
   await expect(input).toHaveCSS('border-right-width', '0px')
   await expect(input).toHaveCSS('border-bottom-color', 'rgb(194, 194, 194)')
-  await expect(select.locator('svg')).toHaveCSS('fill', 'rgb(128, 128, 128)')
 
   await select.click()
   await option.first().click()
@@ -36,7 +35,6 @@ test('下划线禁用', async ({ page }) => {
   await expect(input).toHaveCSS('border-right-width', '0px')
   await expect(input).toHaveCSS('border-bottom-color', 'rgb(219, 219, 219)')
   await expect(input).toHaveCSS('cursor', 'not-allowed')
-  await expect(select.locator('svg')).toHaveCSS('fill', 'rgb(194, 194, 194)')
   const hasDisabled = await input.evaluate((input) => input.hasAttribute('disabled'))
   await expect(hasDisabled).toBe(true)
 

package/demos/pc/app/base-select/multiple.spec.ts

@@ -10,7 +10,7 @@ test('多选时取远端数据与当前已选数据的并集', async ({ page })
   const tag = select.locator('.tiny-tag')
 
   await expect(tag).toHaveCount(2)
-  await select.locator('.tiny-input__suffix').click()
+  await select.click()
   await option.filter({ hasText: '全部' }).click()
   await expect(tag).toHaveCount(7)
   await option.filter({ hasText: '全部' }).click()

package/demos/pc/app/base-select/searchable.spec.ts

@@ -29,7 +29,7 @@ test('searchable-single', async ({ page }) => {
   })
   await option.filter({ hasText: '上海' }).click()
   await page.waitForTimeout(500)
-  await expect(input).toHaveValue('')
+  await expect(input).toHaveValue('上海')
 })
 
 test('searchable-multiple', async ({ page }) => {

package/demos/pc/app/base-select/slot-reference.spec.ts

@@ -12,5 +12,5 @@ test('custom-reference', async ({ page }) => {
 
   await expect(option).toHaveCount(0)
   await reference.click()
-  await page.getByRole('listitem').filter({ hasText: /北京/ }).locator('span').click()
+  await page.getByRole('option').filter({ hasText: /北京/ }).locator('span').click()
 })

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

@@ -28,14 +28,14 @@ export default {
         'zh-CN': `
             通过 <code>multiple</code> 属性启用多选功能，此时 <code>v-model</code> 的值为当前选中值所组成的数组。默认选中值会以标签（Tag 组件）展示。<br>
             通过 <code>multiple-limit</code> 属性限制最多可选择的个数，默认为 0 不限制。<br>
-            通过 <code>show-limit-text</code> 属性限制最多可选择的个数，默认为 0 不限制。<br>
+            设置 <code>show-limit-text</code> 可展示选中条数和限制总条数的占比，默认为 false 不展示。<br>
             多选时，通过给 option 标签配置 <code>required</code> 或者在 options 配置项中添加 <code>required</code> 属性，来设置必选选项。<br>
             通过 <code>dropdown-icon</code> 属性可自定义下拉图标，<code>drop-style</code> 属性可自定义下拉选项样式。<br>
         `,
         'en-US': `
             Use the <code>multiple</code> attribute to enable the multi-selection function. In this case, the value of <code>v-model</code> is an array of selected values. By default, the selected value is displayed as a tag (Tag component).<br>
-            The <code>multiple-limit</code> attribute is used to limit the maximum number of users that can be selected. The default value is 0.
-            The <code>show-limit-text</code> attribute is used to limit the maximum number of users that can be selected. The default value is 0, which is not limited.<br>
+            The <code>multiple-limit</code> attribute is used to limit the maximum number of options available. The default value is 0.
+            Set <code>show-limit-text</code> to display the proportion of the number of selected items and the maximum number of options available. The default value is false.
             When multiple options are selected, you can set <code>required</code> for the option tag or add the <code>required</code> attribute to the options configuration item to set mandatory options.<br>
             You can use the <code>dropdown-icon</code> attribute to customize the drop-down icon, and the <code>drop-style</code> attribute to customize the style of the drop-down options.<br>
         `

package/demos/pc/app/checkbox/checkbox-disabled-composition-api.vue

@@ -0,0 +1,10 @@
+<template>
+  <tiny-checkbox v-model="checked" name="tiny-checkbox" disabled>复选框</tiny-checkbox>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyCheckbox } from '@opentiny/vue'
+
+const checked = ref(true)
+</script>

package/demos/pc/app/checkbox/checkbox-disabled.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test'
+
+test('禁用复选框', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+  await page.goto('checkbox#disabled')
+
+  const checkbox = page.locator('#disabled .tiny-checkbox')
+
+  await expect(checkbox).toHaveClass(/is-disabled/)
+  await expect(checkbox).toHaveClass(/is-checked/)
+
+  // 在浏览器上下文调用原生 click，但先作类型判断，避免 TS 报错
+  await checkbox.evaluate((node: Element) => {
+    if (node instanceof HTMLElement) {
+      node.click()
+    }
+  })
+
+  // 状态应保持不变
+  await expect(checkbox).toHaveClass(/is-checked/)
+})