@opentiny/vue-docs 3.27.1 → 3.28.0

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

@@ -0,0 +1,18 @@
+<template>
+  <tiny-checkbox v-model="checked" name="tiny-checkbox" disabled>复选框</tiny-checkbox>
+</template>
+
+<script>
+import { TinyCheckbox } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCheckbox
+  },
+  data() {
+    return {
+      checked: true
+    }
+  }
+}
+</script>

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

@@ -5,17 +5,17 @@ test('垂直布局', async ({ page }) => {
   await page.goto('checkbox#vertical-checkbox')
 
   const demo = page.locator('#vertical-checkbox')
-  const checkedLabelBJ = demo.getByRole('checkbox', { name: '北京' }).filter({ hasText: '北京' })
+  const checkedLabelBJ = demo.getByRole('checkbox', { name: '北京' }).filter({ hasText: '北京' }).first()
 
   await checkedLabelBJ.click()
   await expect(checkedLabelBJ).toHaveClass(/is-checked/)
-  const checkedLabelSH = demo.getByRole('checkbox', { name: '上海' }).filter({ hasText: '上海' })
+  const checkedLabelSH = demo.getByRole('checkbox', { name: '上海' }).filter({ hasText: '上海' }).first()
   await checkedLabelSH.click()
   await expect(checkedLabelSH).not.toHaveClass(/is-checked/)
-  const checkedLabelGZ = demo.getByRole('checkbox', { name: '广州' }).filter({ hasText: '广州' })
+  const checkedLabelGZ = demo.getByRole('checkbox', { name: '广州' }).filter({ hasText: '广州' }).first()
   await checkedLabelGZ.click()
   await expect(checkedLabelGZ).toHaveClass(/is-checked/)
-  const checkedLabelSZ = demo.getByRole('checkbox', { name: '深圳' }).filter({ hasText: '深圳' })
+  const checkedLabelSZ = demo.getByRole('checkbox', { name: '深圳' }).filter({ hasText: '深圳' }).first()
   await checkedLabelSZ.click()
   await expect(checkedLabelSZ).toHaveClass(/is-checked/)
   const parentWrapper = page.getByLabel('checkbox-group').first()

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

@@ -16,6 +16,19 @@ export default {
       },
       codeFiles: ['basic-usage.vue']
     },
+    // 禁用复选框
+    {
+      demoId: 'disabled',
+      name: {
+        'zh-CN': '禁用',
+        'en-US': 'Disabled'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>disabled</code> 字段设置当前复选框是否为禁用状态。</p>',
+        'en-US': '<p>Set whether the current checkbox is disabled through the <code>disabled</code> field.</p>'
+      },
+      codeFiles: ['checkbox-disabled.vue']
+    },
     {
       demoId: 'checkbox-group',
       name: {

package/demos/pc/app/color-picker/webdoc/color-picker.js

@@ -46,11 +46,11 @@ export default {
     {
       demoId: 'enable-alpha',
       name: {
-        'zh-CN': 'Alpha',
+        'zh-CN': '透明度',
         'en-US': 'Alpha'
       },
       desc: {
-        'zh-CN': '<code>Alpha</code>选择。',
+        'zh-CN': '<code>透明度</code>选择。',
         'en-US': '<code>Alpha</code>select.'
       },
       codeFiles: ['alpha.vue']

package/demos/pc/app/color-select-panel/format.spec.ts

@@ -10,7 +10,7 @@ test('hex', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-select-panel#format')
   await page.getByRole('button', { name: 'Toggle' }).click()
-  await page.getByRole('textbox', { name: '请选择' }).click()
+  await page.getByRole('combobox', { name: '请选择' }).click()
   await page.getByRole('list').getByText('hex').click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(page.locator('#format')).toContainText('颜色值：#66CCFF')
@@ -20,7 +20,7 @@ test('hsl 时应该为 hsl(xxx,xxx,xxx)', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-select-panel#format')
   await page.getByRole('button', { name: 'Toggle' }).click()
-  await page.getByRole('textbox', { name: '请选择' }).click()
+  await page.getByRole('combobox', { name: '请选择' }).click()
   await page.getByRole('list').getByText('hsl').click()
 })
 
@@ -28,7 +28,7 @@ test('hsv 时候应该为 hsv(xx,xx,xx)', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-select-panel#format')
   await page.getByRole('button', { name: 'Toggle' }).click()
-  await page.getByRole('textbox', { name: '请选择' }).click()
+  await page.getByRole('combobox', { name: '请选择' }).click()
   await page.getByRole('list').getByText('hsv').click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(page.locator('#format')).toContainText('颜色值：hsv(199.99999999999997, 60%, 100%)')

package/demos/pc/app/country/fields.spec.js

@@ -5,7 +5,7 @@ test('自定义数据字段', async ({ page }) => {
   await page.goto('country#fields')
 
   const select = page.locator('.tiny-select')
-  const item = page.getByRole('listitem').filter({ hasText: '中国' })
+  const item = page.getByRole('option').filter({ hasText: '中国' })
 
   await select.click()
   await item.click()

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

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('currency#basic-usage')
-  await page.getByRole('textbox', { name: '请选择' }).click()
+  await page.getByRole('combobox', { name: '请选择' }).click()
   const inputBox = page.locator('.tiny-input input').nth(1)
   await expect(inputBox).toHaveAttribute('placeholder', 'VUV')
 })

package/demos/pc/app/currency/custom-service.spec.ts

@@ -3,9 +3,9 @@ import { test, expect } from '@playwright/test'
 test('自定义服务', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('currency#custom-service')
-  await page.locator('#custom-service').getByRole('textbox').click()
+  await page.locator('#custom-service').getByRole('combobox').click()
   await page.waitForTimeout(500)
-  await page.getByRole('listitem').filter({ hasText: 'USD' }).click()
-  const inputBox = page.locator('#custom-service').getByRole('textbox').first()
+  await page.getByRole('option').filter({ hasText: 'USD' }).click()
+  const inputBox = page.locator('#custom-service').getByRole('combobox').first()
   await expect(inputBox).toHaveValue('USD')
 })

package/demos/pc/app/date-panel/shortcuts.vue

@@ -59,30 +59,30 @@ export default {
         }
       ],
       shortcutsMonth: [
-          {
-            text: '一个月前',
-            onClick(picker) {
-              const date = new Date()
-              date.setMonth(date.getMonth() - 1)
-              picker.$emit('pick', date)
-            }
-          },
-          {
-            text: '三个月前',
-            onClick(picker) {
-              const date = new Date()
-              date.setMonth(date.getMonth() - 3)
-              picker.$emit('pick', date)
-            }
-          },
-          {
-            text: '六个月前',
-            onClick(picker) {
-              const date = new Date()
-              date.setMonth(date.getMonth() - 6)
-              picker.$emit('pick', date)
-            }
+        {
+          text: '一个月前',
+          onClick(picker) {
+            const date = new Date()
+            date.setMonth(date.getMonth() - 1)
+            picker.$emit('pick', date)
           }
+        },
+        {
+          text: '三个月前',
+          onClick(picker) {
+            const date = new Date()
+            date.setMonth(date.getMonth() - 3)
+            picker.$emit('pick', date)
+          }
+        },
+        {
+          text: '六个月前',
+          onClick(picker) {
+            const date = new Date()
+            date.setMonth(date.getMonth() - 6)
+            picker.$emit('pick', date)
+          }
+        }
       ],
       shortcutsYear: [
         {

package/demos/pc/app/date-panel/unlink-panels.spec.ts

@@ -7,15 +7,19 @@ test('[DatePanel] 测试范围选择取消面板联动', async ({ page }) => {
   await page.locator('label').filter({ hasText: '单示例' }).click()
 
   // dateRange
-  await page.locator('.tiny-picker-panel__icon-btn').first().click()
-  await page.locator('div').filter({ hasText: /^10$/ }).first().click()
-  await page.getByText('19').nth(1).click()
-  await expect(page.locator('.value-link')).toHaveText('[ "2024-01-10", "2024-02-19" ]')
+  await page.locator('#unlink-panels').getByText('10', { exact: true }).first().click()
+  await page.locator('#unlink-panels').getByText('19').nth(1).click()
+  await expect(page.locator('.value-link')).toHaveText(`[
+  "2025-01-10",
+  "2025-02-19"
+]`)
 
-  await page.locator('div:nth-child(2) > .tiny-date-range-picker__header > button:nth-child(3)').click()
-  await page.getByText('14').nth(2).click()
-  await page.getByText('19', { exact: true }).nth(3).click()
-  await expect(page.locator('.value-unlink')).toHaveText('[ "2024-01-14", "2025-02-19" ]')
+  await page.locator('#unlink-panels').getByText('14').nth(2).click()
+  await page.locator('#unlink-panels').getByText('19', { exact: true }).nth(3).click()
+  await expect(page.locator('.value-unlink')).toHaveText(`[
+  "2025-01-14",
+  "2025-02-19"
+]`)
 
   // monthRange
   await page

package/demos/pc/app/dept/custom-service.spec.ts

@@ -10,21 +10,21 @@ test('自定义服务数据', async ({ page }) => {
   await page
     .locator('div')
     .filter({ hasText: /^公司SZ 技术SZ 海洋网络天闻数媒贝托 SZ鼎桥通信$/ })
-    .getByRole('textbox')
+    .getByRole('combobox')
     .click()
-  await page.getByRole('listitem').filter({ hasText: 'SZ 技术' }).click()
+  await page.getByRole('option').filter({ hasText: 'SZ 技术' }).click()
   await page
     .locator('div')
     .filter({ hasText: /^一级部门测试数据室 XX中国 XX 测试数据部测试数据 XX 管理部$/ })
-    .getByRole('textbox')
+    .getByRole('combobox')
     .click()
-  await page.getByRole('listitem').filter({ hasText: '测试数据室 XX' }).click()
+  await page.getByRole('option').filter({ hasText: '测试数据室 XX' }).click()
   await page
     .locator('div')
     .filter({ hasText: /^五级部门测试数据室 XX中国 XX 测试数据部测试数据 XX 管理部$/ })
-    .getByRole('textbox')
+    .getByRole('combobox')
     .click()
-  await page.getByRole('listitem').filter({ hasText: '测试数据室 XX' }).click()
+  await page.getByRole('option').filter({ hasText: '测试数据室 XX' }).click()
   await page.waitForTimeout(500)
   await page.getByRole('button', { name: '确定' }).click()
   //   await page.waitForTimeout(500)

package/demos/pc/app/directives/webdoc/directives-auto-tip.js

@@ -42,6 +42,7 @@ export default {
           <li><code>content</code>属性，指定提示的内容，支持传入<code>string</code>，<code>VNode</code> 或<code>VNode 数组</code>。不传入值时，使用当前<code>Dom</code>元素的内容。  </li>  
           <li><code>effect</code> 属性，指定提示的效果，支持 <code>light</code> 和 <code>dark</code> ，默认是<code>light</code>亮色主题  </li>  
           <li><code>placement</code> 属性，指定提示的位置，默认值为<code>top</code> 。参见<code>tooltip</code> 组件的<code>placement</code> 属性。   </li>  
+          <li><code>popperClass</code> 属性，设置弹出层的class，该属性在3.28 版本引入 。参见<code>tooltip</code> 组件的<code>popperClass</code> 属性。 </li>  
         </ul>
         2、如果参数为 <code>false</code>，表示禁止自动提示。 <br>
         `,
@@ -53,6 +54,7 @@ export default {
           <li><code>content</code> property specifies the content of the prompt, which can be passed to <code>string</code>, <code>VNode</code>, or the <code>VNode array </code>. When no value is passed, the contents of the current <code>Dom</code> element are used. </li>
           <li><code>effect</code> property, specify the effect of the prompt, support <code>light</code> and <code>dark</code>, default is <code>light</code> bright color theme </li>
           <li><code>placement</code> property specifies the placement of the tip. The default value is <code>top</code>. See the <code>placement</code> property of the <code>tooltip</code> component. </li>
+          <li><code>popperClass</code> attribute, sets the class of the pop-up layer. See <code>tooltip</code> component's <code>popperClass</code> attribute. </li>
           </ul>
           2. If the parameter is <code>false</code>, the automatic prompt is disabled. <br>
         `

package/demos/pc/app/drawer/close-on-press-escape-composition-api.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <tiny-button @click="openDrawer" type="primary"> 抽屉组件 </tiny-button>
+    <tiny-drawer
+      title="标题"
+      :visible="visible"
+      @update:visible="visible = $event"
+      @confirm="confirm"
+      :close-on-press-escape="true"
+    >
+      <div>内容区域</div>
+    </tiny-drawer>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
+
+const visible = ref(false)
+
+function openDrawer() {
+  visible.value = true
+}
+
+function confirm() {
+  visible.value = false
+}
+</script>

package/demos/pc/app/drawer/close-on-press-escape.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('按 Esc 键关闭 Drawer（close-on-press-escape）', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+  await page.goto('drawer#close-on-press-escape')
+
+  const drawer = page.locator('.tiny-drawer__main')
+
+  // 打开 Drawer（用文本更稳定）
+  await page.getByText('抽屉组件').click()
+  await expect(drawer).toBeVisible()
+
+  // 按 Esc
+  await page.keyboard.press('Escape')
+
+  // Drawer 关闭
+  await expect(drawer).toBeHidden()
+})

package/demos/pc/app/drawer/close-on-press-escape.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <tiny-button @click="openDrawer" type="primary"> 抽屉组件 </tiny-button>
+    <tiny-drawer
+      title="标题"
+      :visible="visible"
+      @update:visible="visible = $event"
+      @confirm="confirm"
+      :close-on-press-escape="true"
+    >
+      <div>内容区域</div>
+    </tiny-drawer>
+  </div>
+</template>
+
+<script>
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDrawer,
+    TinyButton
+  },
+  data() {
+    return {
+      visible: false
+    }
+  },
+  methods: {
+    openDrawer() {
+      this.visible = true
+    },
+    confirm() {
+      this.visible = false
+    }
+  }
+}
+</script>

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

@@ -16,6 +16,18 @@ export default {
       },
       codeFiles: ['basic-usage.vue']
     },
+    {
+      demoId: 'close-on-press-escape',
+      name: {
+        'zh-CN': '按下 ESC 关闭抽屉',
+        'en-US': ''
+      },
+      desc: {
+        'zh-CN': '<p>添加 <code>close-on-press-escape</code> 属性可以控制是否可以通过 ESC 关闭抽屉。</p>',
+        'en-US': ''
+      },
+      codeFiles: ['close-on-press-escape.vue']
+    },
     {
       demoId: 'use-through-method',
       name: { 'zh-CN': '通过方法调用', 'en-US': 'Use through method' },

package/demos/pc/app/drop-roles/custom-service.spec.ts

@@ -5,7 +5,7 @@ test('自定义服务', async ({ page }) => {
   await page.goto('drop-roles#custom-service')
 
   const input = page.locator('.tiny-select input')
-  const listItems = page.getByRole('listitem')
+  const listItems = page.getByRole('option')
   const url = await page.evaluate(() => window.location.href)
   const notify1 = page.locator('.tiny-notify').filter({
     hasText: `切换后的角色是：001，根据角色发送请求的 URL 如下：${url}`

package/demos/pc/app/drop-times/basic-usage.spec.ts

@@ -4,8 +4,8 @@ test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drop-times#basic-usage')
 
-  const droptimes = page.locator('#basic-usage').getByRole('textbox', { name: '请选择' })
-  const option = page.getByRole('listitem').filter({ hasText: '01:00' })
+  const droptimes = page.locator('#basic-usage').getByRole('combobox', { name: '请选择' })
+  const option = page.getByRole('option').filter({ hasText: '01:00' })
 
   await droptimes.click()
   await droptimes.focus()

package/demos/pc/app/drop-times/start-end-step.spec.ts

@@ -4,7 +4,7 @@ test('步长与时间区间', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drop-times#start-end-step')
 
-  const droptimes = page.locator('#start-end-step').getByRole('textbox', { name: '请选择' })
+  const droptimes = page.locator('#start-end-step').getByRole('combobox', { name: '请选择' })
   const option1 = page.locator('.tiny-select-dropdown__item').first()
   const option2 = page.locator('.tiny-select-dropdown__item').nth(1)
   const option3 = page.locator('.tiny-select-dropdown__item').last()

package/demos/pc/app/dropdown/trigger-composition-api.vue

@@ -25,6 +25,19 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
+
+    <p>场景 3：设置右键触发下拉</p>
+    <tiny-dropdown trigger="contextmenu">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item :icon="tinyIconPlus">黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconPlusCircle">狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconPlusSquare">螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconCheckedLinear">双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconCheckedSur">蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
   </div>
 </template>
 

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

@@ -9,6 +9,7 @@ test('触发方式', async ({ page }) => {
   const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
   const hoverTrigger = dropDown.first()
   const clickTrigger = dropDown.nth(1)
+  const contextTrigger = dropDown.nth(2)
 
   // hover
   await page.waitForTimeout(2000)
@@ -20,4 +21,16 @@ test('触发方式', async ({ page }) => {
   await expect(dropDownMenu.nth(1)).not.toBeVisible()
   await clickTrigger.click()
   await expect(dropDownMenu.nth(1)).toBeVisible()
+
+  // contextmenu
+  await page.waitForTimeout(2000)
+  await contextTrigger.hover()
+  await expect(dropDownMenu.nth(2)).not.toBeVisible()
+
+  // 右键触发
+  await contextTrigger.click({
+    button: 'right'
+  })
+
+  await expect(dropDownMenu.nth(2)).toBeVisible()
 })

package/demos/pc/app/dropdown/trigger.vue

@@ -25,6 +25,19 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
+
+    <p>场景 3：设置右键触发下拉</p>
+    <tiny-dropdown trigger="contextmenu">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item :icon="tinyIconPlus">黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconPlusCircle">狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconPlusSquare">螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconCheckedLinear">双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconCheckedSur">蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
   </div>
 </template>
 

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

@@ -93,9 +93,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>trigger</code> 属性设置触发下拉的方式，默认为 <code>hover</code>。可选值为：<code>click</code> / <code>hover</code> 。</p>\n',
+          '<p>通过 <code>trigger</code> 属性设置触发下拉的方式，默认为 <code>hover</code>。可选值为：<code>click</code> / <code>hover</code> / <code>contextmenu</code>（3.28.0 起支持）。</p>\n',
         'en-US':
-          '<p>By setting the <code>trigger</code> attribute to trigger a drop-down, the default is <code>hover</code>. The optional values are: <code>click</code> / <code>hover</code>.</p>\n'
+          '<p>Use the <code>trigger</code> attribute to set how the dropdown is triggered. Default is <code>hover</code>. Optional values: <code>click</code> / <code>hover</code> / <code>contextmenu</code> (supported since 3.28.0).</p>\n'
       },
       codeFiles: ['trigger.vue']
     },
@@ -108,7 +108,7 @@ export default {
       desc: {
         'zh-CN': '<p>通过 <code>visible</code> 属性手动控制下拉菜单显隐，优先级高于trigger。</p>\n',
         'en-US':
-          '<p>Manually control the visibility of the dropdown menu through the<code>visible</code>attribute, with priority over trigger.</p>\n'
+          '<p>Manually control the visibility of the dropdown menu through the <code>visible</code>attribute, with priority over trigger.</p>\n'
       },
       codeFiles: ['visible.vue']
     },
@@ -307,7 +307,7 @@ export default {
       support: {
         value: true
       },
-      description: '支持点击和悬停两种触发方式。',
+      description: '支持点击、悬停以及右键（contextmenu，3.28.0 起支持）触发方式。',
       cloud: {
         value: true
       },

package/demos/pc/app/file-upload/upload-file-list-saas.spec.ts

@@ -5,10 +5,8 @@ test('SaaS 风格文件列表', async ({ page }) => {
   await page.goto('file-upload#upload-file-list-saas')
 
   const upload = page.getByRole('button', { name: '文件上传' })
-  const lists = page.locator('div').filter({ hasText: /^test2\.doc删除16\.84 MB$/ })
 
   await upload.isVisible()
-  await expect(lists).toHaveCount(2)
   await page
     .locator('div')
     .filter({ hasText: /^test3\.png删除60K\/200K$/ })

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

@@ -25,9 +25,9 @@ test('测试基本表单', async ({ page }) => {
   await expect(datePicker).toHaveValue(/15/)
 
   // 時間选择器
-  const timePicker = demo.getByRole('textbox').nth(1)
+  const timePicker = demo.getByRole('combobox').nth(0)
   await timePicker.click()
-  await page.getByRole('listitem').filter({ hasText: '00:30' }).click()
+  await page.getByRole('option').filter({ hasText: '00:30' }).click()
   await expect(timePicker).toHaveValue('00:30')
 
   // 提交按钮

package/demos/pc/app/form/custom-validation-string-length.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="demo-form">
+    <tiny-form :model="state" :rules="rules">
+      <tiny-form-item label="HTML" prop="value0">
+        <tiny-input :maxLength="3" v-model="state.value0"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="默认" prop="value1">
+        <tiny-input v-model="state.value1"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="自定义" prop="value2">
+        <tiny-input v-model="state.value2"></tiny-input>
+      </tiny-form-item>
+    </tiny-form>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+
+import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput } from '@opentiny/vue'
+
+const state = reactive({
+  value0: '',
+  value1: '',
+  value2: ''
+})
+
+const rules = ref({
+  value1: [{ max: 3 }],
+  value2: [{ max: 3, regular: (val) => val.length }]
+})
+</script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+</style>

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

@@ -121,6 +121,18 @@ export default {
       },
       codeFiles: ['custom-validation-rule.vue']
     },
+    {
+      demoId: 'custom-validation-string-length',
+      name: {
+        'zh-CN': '自定义字符串长度',
+        'en-US': 'Custom String Length'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>rules</code> 的 <code>regular</code> 进行自定义字符串长度（3.28.0版本新增）</p>',
+        'en-US': '<p>Customize string length using the <code>regular</code> method of <code>rules</code>. </p>'
+      },
+      codeFiles: ['custom-validation-string-length.vue']
+    },
     {
       demoId: 'validation-position',
       name: {

package/demos/pc/app/grid/custom/column-simple.spec.js

@@ -4,10 +4,10 @@ test('简化版列设置测试', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-custom#custom-column-simple')
   await page.locator('.tiny-select > div').click()
-  await page.getByRole('listitem').filter({ hasText: '员工数' }).click()
+  await page.locator('.tiny-option-label').filter({ hasText: '员工数' }).click()
   const thHeader = page.locator('th.tiny-grid-header__column').nth(3)
   await expect(thHeader).toContainText('地址')
-  await page.getByRole('listitem').filter({ hasText: '名称' }).click()
+  await page.locator('.tiny-option-label').filter({ hasText: '名称' }).click()
   const thHeader2 = page.locator('th.tiny-grid-header__column').nth(1)
 
   await expect(thHeader2).toContainText('员工数')