@opentiny/vue-docs 2.1.9 → 2.2.0

package/demos/pc/app/popconfirm/type.spec.ts

@@ -1,13 +1,13 @@
-import { test, expect } from '@playwright/test'
+import { test, expect, Locator } from '@playwright/test'
 
 test('图标类型', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popconfirm#type')
 
-  const preview = page.locator('#preview')
-  const popConfirm = preview.locator('.tiny-popconfirm .tiny-popconfirm__reference .tiny-button')
+  const demo = page.locator('#type')
+  const popConfirm = demo.locator('.tiny-popconfirm .tiny-popconfirm__reference .tiny-button')
   const popConfirmPopover = page.locator('body > .tiny-popconfirm-popover')
-  const getIcon = (parent) => parent.locator('svg.tiny-svg path').first()
+  const getIcon = (parent: Locator) => parent.locator('svg.tiny-svg path').first()
 
   await popConfirm.first().click()
   await expect(popConfirmPopover.first()).toBeVisible()

package/demos/pc/app/popconfirm/type.vue

@@ -1,30 +1,30 @@
 <template>
   <div>
-    <tiny-popconfirm :title="title" type="info" trigger="click">
+    <tiny-popconfirm :title="title" type="info">
       <template #reference>
         <tiny-button>info</tiny-button>
       </template>
     </tiny-popconfirm>
 
-    <tiny-popconfirm :title="title" type="error" trigger="click">
+    <tiny-popconfirm :title="title" type="error">
       <template #reference>
         <tiny-button>error</tiny-button>
       </template>
     </tiny-popconfirm>
 
-    <tiny-popconfirm :title="title" type="warning" trigger="click">
+    <tiny-popconfirm :title="title" type="warning">
       <template #reference>
         <tiny-button>warning</tiny-button>
       </template>
     </tiny-popconfirm>
 
-    <tiny-popconfirm :title="title" type="success" trigger="click">
+    <tiny-popconfirm :title="title" type="success">
       <template #reference>
         <tiny-button>success</tiny-button>
       </template>
     </tiny-popconfirm>
 
-    <tiny-popconfirm :title="title" :type="TinyIconDel" trigger="click">
+    <tiny-popconfirm :title="title" :type="TinyIconDel">
       <template #reference>
         <tiny-button>自定义</tiny-button>
       </template>

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

@@ -33,48 +33,59 @@ export default {
     },
     {
       'demoId': 'placement',
-      'name': { 'zh-CN': '提示框显示位置', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过 <code>placement</code> 设置提示框显示位置。</p>', 'en-US': '' },
+      'name': { 'zh-CN': '提示框显示位置', 'en-US': 'Display position of prompt box' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>placement</code> 设置提示框显示位置。</p>',
+        'en-US': '<p>Set the display position of the prompt box through<code>placement</code>.</p>'
+      },
       'codeFiles': ['placement.vue']
     },
     {
       'demoId': 'custom-class',
-      'name': { 'zh-CN': '自定义类名', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过 <code>custom-class</code> 自定义气泡提示框的类名。</p>', 'en-US': '' },
+      'name': { 'zh-CN': '自定义类名', 'en-US': 'Custom class' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>custom-class</code> 自定义气泡提示框的类名。</p>',
+        'en-US': '<p>Customize the class name of the bubble prompt box through<code>custom class</code>.</p>'
+      },
       'codeFiles': ['custom-class.vue']
     },
     {
       'demoId': 'slot-footer',
-      'name': { 'zh-CN': '底部插槽', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过 <code>footer</code> 插槽自定义底部内容。</p>', 'en-US': '' },
+      'name': { 'zh-CN': '底部插槽', 'en-US': 'Footer slot' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>footer</code> 插槽自定义底部内容。</p>',
+        'en-US': '<p>Customize the bottom content through the<code>footer</code>slot.</p>'
+      },
       'codeFiles': ['slot-footer.vue']
     },
     {
       'demoId': 'width',
-      'name': { 'zh-CN': '设置宽度', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过 <code>width</code> 设置提示框宽度。</p>', 'en-US': '' },
+      'name': { 'zh-CN': '设置宽度', 'en-US': 'Set width' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>width</code> 设置提示框宽度。</p>',
+        'en-US': '<p>Set the width of the prompt box through<code>width</code></ P>'
+      },
       'codeFiles': ['width.vue']
     },
     {
       'demoId': 'cancel-button',
-      'name': { 'zh-CN': '隐藏取消按钮', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过 <code>cancel-button</code> 设置是否展示取消按钮。</p>', 'en-US': '' },
+      'name': { 'zh-CN': '隐藏取消按钮', 'en-US': 'Hide Cancel Button' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>cancel-button</code> 设置是否展示取消按钮。</p>',
+        'en-US': '<p>Set whether to display the cancel button through<code>cancel button</code></ P>'
+      },
       'codeFiles': ['cancel-button.vue']
     },
     {
-      'demoId': 'visible-event',
-      'name': { 'zh-CN': '隐藏、显示事件', 'en-US': '' },
+      'demoId': 'event',
+      'name': { 'zh-CN': '事件', 'en-US': 'Event' },
       'desc': {
-        'zh-CN': '<p>当气泡确认框显示时触发 <code>show</code> 事件，当确认框隐藏时触发 <code>hide</code> 事件。</p>',
-        'en-US': ''
+        'zh-CN':
+          '<p>当气泡确认框显示时触发 <code>show</code> 事件，当确认框隐藏时触发 <code>hide</code> 事件。<br />当点击底部确认按钮时会同时触发 <code>hide</code> 和 <code>confirm</code> 事件。</p>',
+        'en-US':
+          '<p>The<code>show</code>event is triggered when the bubble confirmation box is displayed, and the<code>hide</code>event is triggered when the confirmation box is hidden< When clicking the confirm button at the bottom, both the<code>hide</code>and<code>confirm</code>events will be triggered simultaneously.</p>'
       },
-      'codeFiles': ['visible-event.vue']
-    },
-    {
-      'demoId': 'confirm-event',
-      'name': { 'zh-CN': '确认事件', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>当点击底部确认按钮时触发 <code>confirm</code> 事件。</p>', 'en-US': '' },
-      'codeFiles': ['confirm-event.vue']
+      'codeFiles': ['event.vue']
     }
   ],
   apis: [
@@ -95,9 +106,9 @@ export default {
         {
           'name': 'content',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '设置气泡提示框的内容',
+            'zh-CN': '气泡提示框的内容',
             'en-US': 'Set the pop confirm content'
           },
           'demoId': 'basic-usage'
@@ -105,8 +116,8 @@ export default {
         {
           'name': 'placement',
           'type':
-            'top | top-start | top-end | bottom | bottom-start | bottom-end | left | left-start | left-end | right | right-start | right-end',
-          'defaultValue': 'top',
+            "'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'",
+          'defaultValue': "'top'",
           'desc': {
             'zh-CN': '气泡提示框显示位置',
             'en-US': 'Set the pop confirm placement'
@@ -116,7 +127,7 @@ export default {
         {
           'name': 'custom-class',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '为气泡提示框自定义类名',
             'en-US': 'Set the pop confirm popper class name'
@@ -126,7 +137,7 @@ export default {
         {
           'name': 'title',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '设置气泡提示框的标题',
             'en-US': 'Set the pop confirm title'
@@ -135,8 +146,8 @@ export default {
         },
         {
           'name': 'trigger',
-          'type': 'trigger | hover',
-          'defaultValue': 'hover',
+          'type': "'click' | 'hover'",
+          'defaultValue': "'hover'",
           'desc': {
             'zh-CN': '气泡提示框显示触发方式',
             'en-US': 'How to show the pop confirm'
@@ -145,11 +156,11 @@ export default {
         },
         {
           'name': 'type',
-          'type': 'info | success | warning | error | Component',
-          'defaultValue': '',
+          'type': "'info' | 'success' | 'warning' | 'error' | VueComponent",
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '提示图标类型，可选值有info、success、warning、error，或者传入自定义图标',
-            'en-US': 'Set the icon type, info,success,warning,error can be set'
+            'zh-CN': '提示图标类型，可以传入自定义图标',
+            'en-US': 'Prompt icon type, custom icons can be passed in'
           },
           'demoId': 'type'
         },
@@ -158,7 +169,7 @@ export default {
           'type': 'string | number',
           'defaultValue': '350',
           'desc': {
-            'zh-CN': '设置气泡提示框宽度',
+            'zh-CN': '气泡提示框宽度',
             'en-US': 'Set the pop confirm box with'
           },
           'demoId': 'width'
@@ -168,7 +179,7 @@ export default {
         {
           'name': 'confirm',
           'type': '(visible: boolean) => void',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '点击确认按钮时触发',
             'en-US': 'Triggered when confirm button is clicked'
@@ -178,29 +189,29 @@ export default {
         {
           'name': 'hide',
           'type': '(visible: boolean) => void',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '气泡确认框关闭时触发',
             'en-US': 'Triggered when pop confirm hide'
           },
-          'demoId': 'visible-event'
+          'demoId': 'event'
         },
         {
           'name': 'show',
           'type': '(visible: boolean) => void',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '气泡确认框显示时触发',
             'en-US': 'Triggered when pop confirm show'
           },
-          'demoId': 'visible-event'
+          'demoId': 'event'
         }
       ],
       'slots': [
         {
           'name': 'footer',
           'type': '',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '底部插槽',
             'en-US': 'default slot'
@@ -210,7 +221,7 @@ export default {
         {
           'name': 'reference',
           'type': '',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '触发气泡提示框显示的 HTML 元素',
             'en-US': 'reference slot'

package/demos/pc/app/popconfirm/width.spec.ts

@@ -4,8 +4,8 @@ test('设置气泡确认框宽度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popconfirm#width')
 
-  const preview = page.locator('#preview')
-  const popConfirm = preview.locator('.tiny-popconfirm .tiny-popconfirm__reference .tiny-button')
+  const demo = page.locator('#width')
+  const popConfirm = demo.locator('.tiny-popconfirm .tiny-popconfirm__reference .tiny-button')
   const popConfirmPopover = page.locator('body > .tiny-popconfirm-popover')
 
   await popConfirm.hover()

package/demos/pc/app/popeditor/auto-lookup.spec.ts

@@ -4,7 +4,7 @@ test('PopEditor 远程数据请求', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popeditor#auto-lookup')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#auto-lookup')
   const textBox = preview.getByRole('textbox')
   const dialogBox = page.locator('.tiny-dialog-box')
   const grid = dialogBox.locator('.tiny-grid__wrapper').nth(0)

package/demos/pc/app/popeditor/auto-reset.spec.ts

@@ -4,7 +4,7 @@ test('PopEditor 自定义查询条件 自动重置参数', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popeditor#auto-reset')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#auto-reset')
   const textBox = preview.getByRole('textbox')
   const dialogBox = page.locator('.tiny-dialog-box')
   const company = dialogBox.getByRole('listitem').filter({ hasText: '公司名' }).getByRole('textbox')

package/demos/pc/app/popeditor/{base.spec.ts → basic-usage.spec.ts}

@@ -2,11 +2,10 @@ import { test, expect } from '@playwright/test'
 
 test('PopEditor 基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('popeditor#base')
+  await page.goto('popeditor#basic-usage')
 
-  const preview = page.locator('#preview')
-  const textBox = preview.getByPlaceholder('请选择')
-  const del = page.locator('#preview path').nth(2)
+  const textBox = page.getByRole('textbox', { name: '请选择' })
+  const del = page.locator('#basic-usage').getByRole('img')
   const dialogBox = page.locator('.tiny-dialog-box')
   const confirmBtn = dialogBox.getByRole('button', { name: '确 认' })
   const cancelBtn = dialogBox.getByRole('button', { name: '取 消' })
@@ -32,8 +31,7 @@ test('PopEditor 基本用法', async ({ page }) => {
 
   // 点击删除图标，清空文本框
   await del.click()
-  await expect(textBox).toHaveValue('')
-  // 编辑弹出框弹出后点击取消按钮，弹出框消失
+  await expect(textBox).toHaveValue('') // 编辑弹出框弹出后点击取消按钮，弹出框消失
   await textBox.click()
   await expect(dialogBox).toBeVisible()
   await cancelBtn.click()

package/demos/pc/app/popeditor/before-close.spec.ts

@@ -4,8 +4,7 @@ test('PopEditor 拦截弹窗关闭', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popeditor#before-close')
 
-  const preview = page.locator('#preview')
-  const textBox = preview.getByPlaceholder('请选择')
+  const textBox = page.getByRole('textbox', { name: '请选择' })
   const dialogBox = page.locator('.tiny-dialog-box')
   const confirmBtn = dialogBox.getByRole('button', { name: '确 认' })
   const cancelBtn = dialogBox.getByRole('button', { name: '取 消' })

package/demos/pc/app/popeditor/before-reset.spec.ts

@@ -4,7 +4,7 @@ test('PopEditor 重置', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popeditor#before-reset')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#before-reset')
   const textBox = preview.getByRole('textbox')
   const dialogBox = page.locator('.tiny-dialog-box')
   const company = dialogBox.getByRole('listitem').filter({ hasText: '公司名' }).getByRole('textbox')

package/demos/pc/app/popeditor/clearable.spec.ts

@@ -4,7 +4,7 @@ test('PopEditor 弹出窗筛选条件支持可清空', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popeditor#clearable')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#clearable')
   const textBox = preview.getByRole('textbox')
   const dialogBox = page.locator('.tiny-dialog-box')
   const company = dialogBox.getByRole('listitem').filter({ hasText: '公司名' }).getByRole('textbox')

package/demos/pc/app/popeditor/condition-form.spec.ts

@@ -4,22 +4,28 @@ test('PopEditor 表单中使用并开启表单校验', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popeditor#condition-form')
 
-  const preview = page.locator('#preview')
-  const textBox = preview.locator('.tiny-input').nth(3)
-  const textBoxInput = textBox.locator('input')
-  const del = textBox.locator('svg')
-  const dialogBox = page.locator('.tiny-dialog-box')
-  const confirmBtn = dialogBox.getByRole('button', { name: '确 认' })
-  const dataItem = dialogBox.getByRole('row', { name: '1 GFD科技YX公司 福建 福州' }).locator('span')
+  const preview = page.locator('#condition-form')
+  const textBox = preview.getByRole('textbox').nth(2)
+  const textBoxInput1 = page.getByText('15').nth(1)
+  const textBoxInput2 = page.getByText('18').nth(1)
+  const dialogBox = page.locator('div').getByRole('textbox').nth(5)
+  const del = page
+    .locator('div')
+    .filter({ hasText: /^文本$/ })
+    .getByRole('img')
+  const confirmBtn = page.getByRole('button', { name: '确 认' })
+  const dataItem = page.getByRole('row', { name: 'GFD科技YX公司 福建 福州' }).locator('.tiny-grid-radio.size__mini')
   const tooltip = page.getByRole('tooltip', { name: '必填' })
 
   await textBox.click()
+  await textBoxInput1.click()
+  await textBoxInput2.click()
+  await dialogBox.click()
   await dataItem.click()
   await confirmBtn.click()
-  await expect(dialogBox).not.toBeVisible()
-  await expect(textBoxInput).toHaveValue('GFD科技YX公司')
+  await expect(dialogBox).toHaveValue('GFD科技YX公司')
 
   await del.click()
-  await expect(textBoxInput).toHaveValue('')
+  await expect(dialogBox).toHaveValue('')
   await expect(tooltip).toBeVisible()
 })

package/demos/pc/app/popeditor/condition-layout.spec.ts

@@ -4,7 +4,7 @@ test('PopEditor 布局与配置', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popeditor#condition-layout')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#condition-layout')
   const textBox = preview.getByRole('textbox')
   const dialogBox = page.locator('.tiny-dialog-box')
   const leftLayout = dialogBox.locator('.tiny-popeditor-body__left')

package/demos/pc/app/popeditor/conditions.spec.ts

@@ -4,7 +4,7 @@ test('PopEditor 自定义查询条件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popeditor#conditions')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#conditions')
   const textBox = preview.getByRole('textbox')
   const dialogBox = page.locator('.tiny-dialog-box')
   const company = dialogBox.getByRole('listitem').filter({ hasText: '公司名' }).getByRole('textbox')

package/demos/pc/app/popeditor/disabled.spec.ts

@@ -4,9 +4,8 @@ test('PopEditor 禁用', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popeditor#disabled')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#disabled')
   const textBox = preview.getByRole('textbox')
-  const dialogBox = page.locator('.tiny-dialog-box')
 
   // 禁用
   await expect(textBox).toBeDisabled()

package/demos/pc/app/popeditor/draggable-composition-api.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <h5>组件属性draggable默认为true，不需设置就可以在标题栏按住鼠标拖动弹出窗口：</h5>
+    <p>组件属性 draggable 默认为 true，不需设置就可以在标题栏按住鼠标拖动弹出窗口：</p>
     <tiny-popeditor v-model="value" :grid-op="gridOp" text-field="name" value-field="id"></tiny-popeditor>
-    <h5>如果设置属性draggable为false，那么就不能拖动弹出窗口：</h5>
+    <p>如果设置属性 draggable 为 false，那么就不能拖动弹出窗口：</p>
     <tiny-popeditor
       v-model="value"
       :grid-op="gridOp"

package/demos/pc/app/popeditor/draggable.spec.ts

@@ -20,6 +20,6 @@ test('PopEditor 拖动窗口', async ({ page }) => {
   await page.mouse.up()
 
   const { x: x1, y: y1 } = await dialogBox.boundingBox()
-  await expect(x).not.toEqual(x1)
+  await expect(x).toEqual(x1)
   await expect(y).not.toEqual(y1)
 })

package/demos/pc/app/popeditor/draggable.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <h5>组件属性draggable默认为true，不需设置就可以在标题栏按住鼠标拖动弹出窗口：</h5>
+    <p>组件属性 draggable 默认为 true，不需设置就可以在标题栏按住鼠标拖动弹出窗口：</p>
     <tiny-popeditor v-model="value" :grid-op="gridOp" text-field="name" value-field="id"></tiny-popeditor>
-    <h5>如果设置属性draggable为false，那么就不能拖动弹出窗口：</h5>
+    <p>如果设置属性 draggable 为 false，那么就不能拖动弹出窗口：</p>
     <tiny-popeditor
       v-model="value"
       :grid-op="gridOp"

package/demos/pc/app/popeditor/events-composition-api.vue

@@ -8,6 +8,8 @@
     :show-pager="true"
     :pager-op="pagerOp"
     @page-change="handlePageChange"
+    @popup="handlePopup"
+    @close="handleClose"
   ></tiny-popeditor>
 </template>
 
@@ -120,4 +122,12 @@ function handlePageChange(val) {
   const offset = (val - 1) * pagerOp.value.pageSize
   gridOp.value.data = dataset.slice(offset, offset + pagerOp.value.pageSize)
 }
+
+function handlePopup() {
+  Modal.message('popup 弹窗打开事件')
+}
+
+function handleClose() {
+  Modal.message('close 弹窗关闭事件')
+}
 </script>

package/demos/pc/app/popeditor/events.spec.ts

@@ -4,7 +4,7 @@ test('PopEditor change 事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popeditor#events')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#events')
   const textBox = preview.getByRole('textbox')
   const dialogBox = page.locator('.tiny-dialog-box')
   const confirmBtn = dialogBox.getByRole('button', { name: '确 认' })

package/demos/pc/app/popeditor/events.vue

@@ -8,6 +8,8 @@
     :show-pager="true"
     :pager-op="pagerOp"
     @page-change="handlePageChange"
+    @popup="handlePopup"
+    @close="handleClose"
   ></tiny-popeditor>
 </template>
 
@@ -126,6 +128,12 @@ export default {
       ]
       const offset = (val - 1) * this.pagerOp.pageSize
       this.gridOp.data = dataset.slice(offset, offset + this.pagerOp.pageSize)
+    },
+    handlePopup() {
+      Modal.message('popup 弹窗打开事件')
+    },
+    handleClose() {
+      Modal.message('close 弹窗关闭事件')
     }
   }
 }

package/demos/pc/app/popeditor/grid.spec.ts

@@ -4,7 +4,7 @@ test('PopEditor 表格编辑', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popeditor#grid')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#grid')
   const textBox = preview.getByRole('textbox')
   const dialogBox = page.locator('.tiny-dialog-box')
   const grid = dialogBox.locator('.tiny-grid__wrapper')

package/demos/pc/app/popeditor/icon.spec.ts

@@ -4,7 +4,7 @@ test('PopEditor 自定义图标', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popeditor#icon')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#icon')
   const icon = preview.locator('.tiny-popeditor-readonly svg path')
 
   // 图标非默认图标

package/demos/pc/app/popeditor/multi-composition-api.vue

@@ -10,7 +10,7 @@
       value-split="@"
       text-split="@"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <p v-if="value">value 值：{{ value }}</p>
   </div>
 </template>
 

package/demos/pc/app/popeditor/multi-value-array-composition-api.vue

@@ -10,7 +10,7 @@
       value-split="@"
       text-split="@"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <div class="demo-pop-editor-selected-box" v-if="value">value 值：{{ value }}</div>
   </div>
 </template>
 
@@ -107,3 +107,9 @@ const gridOp = ref({
   data: dataset
 })
 </script>
+
+<style scoped>
+.demo-pop-editor-selected-box {
+  margin-top: 12px;
+}
+</style>

package/demos/pc/app/popeditor/multi-value-array.spec.ts

@@ -4,13 +4,9 @@ test('PopEditor 多选且初始数据为数组', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popeditor#multi-value-array')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#multi-value-array')
   const textBox = preview.getByRole('textbox')
-  const textBoxValue = page.locator('#preview div').filter({ hasText: 'value 值：[ 1, 2 ]' }).first()
 
   // 多选后文本框里以“@”分割
   await expect(textBox).toHaveValue(/@/)
-
-  // 值以数组形式
-  await expect(textBoxValue).toHaveText(/[ 1, 2 ]/)
 })

package/demos/pc/app/popeditor/multi-value-array.vue

@@ -10,7 +10,7 @@
       value-split="@"
       text-split="@"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <div class="demo-pop-editor-selected-box" v-if="value">value 值：{{ value }}</div>
   </div>
 </template>
 
@@ -115,3 +115,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-pop-editor-selected-box {
+  margin-top: 12px;
+}
+</style>

package/demos/pc/app/popeditor/multi.spec.ts

@@ -4,7 +4,7 @@ test('PopEditor 多选', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popeditor#multi')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#multi')
   const textBox = preview.getByRole('textbox')
   const dialogBox = page.locator('.tiny-dialog-box')
   const confirmBtn = dialogBox.getByRole('button', { name: '确 认' })

package/demos/pc/app/popeditor/multi.vue

@@ -10,7 +10,7 @@
       value-split="@"
       text-split="@"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <p v-if="value">value 值：{{ value }}</p>
   </div>
 </template>
 

package/demos/pc/app/popeditor/pager.spec.ts

@@ -4,7 +4,7 @@ test('PopEditor 分页', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popeditor#pager')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#pager')
   const textBox = preview.getByRole('textbox')
   const dialogBox = page.locator('.tiny-dialog-box')
   const pager = dialogBox.locator('.tiny-pager__number')