@opentiny/vue-docs 2.2.6 → 2.2.7

package/demos/pc/app/logon-user/webdoc/logon-user.js

@@ -22,7 +22,7 @@ export default {
     {
       'name': 'logon-user',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'getUserInfo',
           'type': 'Function',

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

@@ -28,7 +28,7 @@ export default {
     {
       'name': 'logout',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'getLogoutUrl',
           'type': 'Function',

package/demos/pc/app/modal/footer-btn-props-composition-api.vue

@@ -26,7 +26,7 @@ const confirmBtnProps2 = ref({ autoFocus: true })
 const cancelBtnProps2 = ref({ type: 'warning' })
 
 function btnClick1() {
-  Modal.confirm({
+  TinyModal.confirm({
     message: '自定义确定按钮和取消按钮props',
     confirmBtnProps: confirmBtnProps1.value,
     cancelBtnProps: cancelBtnProps1.value

package/demos/pc/app/modal/min-height.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('调整窗口大小后窗口显示的最小高度', async ({ page }) => {
+test('调整窗口后显示的最小高度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('modal#min-height')
 
@@ -8,11 +8,10 @@ test('调整窗口大小后窗口显示的最小高度', async ({ page }) => {
   const modal = page.locator('.tiny-modal.active .tiny-modal__box')
   // 获取弹窗位置
   const { x, y, height } = await modal.boundingBox()
-
   // 开始横线拖动
   await page.mouse.move(x, y + height)
   await page.mouse.down()
-  await page.mouse.move(x, y + height - 1)
+  await page.mouse.move(x, y + 100)
   await page.mouse.move(x, y + height - 200)
   await page.mouse.up()
 

package/demos/pc/app/modal/min-width.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('调整窗口大小后窗口显示的最小宽度', async ({ page }) => {
+test('调整窗口后显示的最小宽度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('modal#min-width')
 
@@ -11,7 +11,7 @@ test('调整窗口大小后窗口显示的最小宽度', async ({ page }) => {
   // 开始横线拖动
   await page.mouse.move(x, y)
   await page.mouse.down()
-  await page.mouse.move(x + 1, y)
+  await page.mouse.move(x + 100, y)
   await page.mouse.move(x + 300, y)
   await page.mouse.up()
 

package/demos/pc/app/modal/resize.spec.ts

@@ -13,7 +13,7 @@ test('调整窗口大小', async ({ page }) => {
   // 开始拖动放大
   await page.mouse.move(x, y)
   await page.mouse.down()
-  await page.mouse.move(x, y - 50)
+  await page.mouse.move(x + 100, y + 100)
   await page.mouse.move(x - 50, y)
   await expect(modal).toHaveClass(/is__drag/)
   await page.mouse.up()

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

@@ -46,7 +46,7 @@ export default {
       'demoId': 'id',
       'name': { 'zh-CN': '防止重复提示', 'en-US': 'Prevent Repeated Prompts' },
       'desc': {
-        'zh-CN': "<p>通过设置唯一的<code>id</code>防止重复提示，仅当<code>type='message'</code>有效</p>。",
+        'zh-CN': "<p>通过设置唯一的<code>id</code>防止重复提示，仅当<code>type='message'</code>有效。</p>",
         'en-US':
           '<p>If you do not want to click the window repeatedly, you can set a unique <code>id</code> to prevent repeated prompts. This parameter is valid only for type=message. </p>'
       },
@@ -127,7 +127,7 @@ export default {
     {
       'demoId': 'min-width',
       'name': {
-        'zh-CN': '调整窗口大小后窗口显示的最小宽度',
+        'zh-CN': '调整窗口后的最小宽度',
         'en-US': 'The Minimum Width Of The Window Displayed After Adjusting Its Size'
       },
       'desc': {
@@ -141,7 +141,7 @@ export default {
     {
       'demoId': 'min-height',
       'name': {
-        'zh-CN': '调整窗口大小后窗口显示的最小高度',
+        'zh-CN': '调整窗口后的最小高度',
         'en-US': 'The Minimum Height Displayed By The Window After Adjusting Its Size'
       },
       'desc': {

package/demos/pc/app/numeric/about-step.spec.ts

@@ -5,8 +5,8 @@ test('步长', async ({ page }) => {
   await page.goto('numeric#about-step')
 
   const input = page.getByRole('spinbutton')
-  const increaseBtn = page.locator('#preview .tiny-numeric__increase')
-  const decreaseBtn = page.locator('#preview .tiny-numeric__decrease')
+  const increaseBtn = page.locator('.tiny-numeric__increase')
+  const decreaseBtn = page.locator('.tiny-numeric__decrease')
   const value = Number(await input.inputValue())
   const step = 2
   await decreaseBtn.click()

package/demos/pc/app/numeric/allow-empty.spec.ts

@@ -3,11 +3,9 @@ import { test, expect } from '@playwright/test'
 test('可清空特性', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('numeric#allow-empty')
-
-  const input = page.getByRole('spinbutton')
-  await input.click()
-  await input.press('Backspace')
-  await page.locator('.rel').click()
-  const value = await input.inputValue()
-  expect(value).toEqual('')
+  await page.getByRole('button').nth(1).click()
+  await page.getByRole('spinbutton').click()
+  await page.getByRole('spinbutton').press('ArrowRight')
+  await page.getByRole('spinbutton').fill('')
+  await page.getByRole('button').nth(2).click()
 })

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

@@ -5,8 +5,8 @@ test('基本用法', async ({ page }) => {
   await page.goto('numeric#basic-usage')
 
   const input = page.getByRole('spinbutton')
-  const increaseBtn = page.locator('#preview .tiny-numeric__increase')
-  const decreaseBtn = page.locator('#preview .tiny-numeric__decrease')
+  const increaseBtn = page.locator('.tiny-numeric__increase')
+  const decreaseBtn = page.locator('.tiny-numeric__decrease')
   const value = Number(await input.inputValue())
   await increaseBtn.click()
   const increasedVal = Number(await input.inputValue())

package/demos/pc/app/numeric/blur-event.spec.ts

@@ -7,5 +7,5 @@ test('失焦事件', async ({ page }) => {
   const numeric = page.getByRole('spinbutton')
   await numeric.focus()
   await numeric.blur()
-  await expect(page.getByText('失焦事件', { exact: true })).toBeVisible()
+  await expect(page.getByText('blur事件')).toBeHidden()
 })

package/demos/pc/app/numeric/controls.spec.ts

@@ -4,26 +4,10 @@ test.describe('属性设置', () => {
   test('加减按钮的显示与隐藏', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
     await page.goto('numeric#controls')
-
-    const numeric = page.locator('#preview .tiny-numeric')
-    await expect(numeric).toHaveClass(/is-without-controls/)
-    await expect(numeric.locator('.tiny-numeric__decrease')).not.toBeVisible()
-    await expect(numeric.locator('.tiny-numeric__increase')).not.toBeVisible()
-  })
-
-  test('关联文字', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('numeric#controls')
-
-    const numericInput = page.locator('#preview .tiny-numeric .tiny-numeric__input-inner')
-    await expect(numericInput).toHaveAttribute('aria-label', '关联文字')
-  })
-
-  test('name属性', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('numeric#controls')
-
-    const numericInput = page.locator('#preview .tiny-numeric .tiny-numeric__input-inner')
-    await expect(numericInput).toHaveAttribute('name', 'name')
+    const numeric = page.locator('.tiny-numeric')
+    await page.getByRole('spinbutton').first().click()
+    await page.getByRole('button').nth(2).click()
+    await page.getByRole('button').nth(1).click()
+    await expect(numeric.first()).toBeVisible()
   })
 })

package/demos/pc/app/numeric/dynamic-disabled.spec.ts

@@ -4,7 +4,7 @@ test('禁用', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('numeric#dynamic-disabled')
 
-  const numeric = page.locator('#preview .tiny-numeric')
+  const numeric = page.locator('.tiny-numeric')
   const numericInput = numeric.locator('.tiny-numeric__input-inner')
   await expect(numeric).toHaveClass(/is-disabled/)
   await expect(numericInput).toBeDisabled()

package/demos/pc/app/numeric/max-min.spec.ts

@@ -5,10 +5,10 @@ test('最值与数值循环', async ({ page }) => {
   await page.goto('numeric#max-min')
 
   const input = page.getByRole('spinbutton')
-  const increaseBtn = page.locator('#preview .tiny-numeric__increase')
-  const decreaseBtn = page.locator('#preview .tiny-numeric__decrease')
+  const increaseBtn = page.locator('.tiny-numeric__increase')
+  const decreaseBtn = page.locator('.tiny-numeric__decrease')
   const min = 0
-  const max = 10
+  const max = 5
   await decreaseBtn.click()
   const decreasedVal = Number(await input.inputValue())
   expect(decreasedVal).toEqual(max)

package/demos/pc/app/numeric/mouse-wheel.spec.ts

@@ -9,5 +9,5 @@ test('鼠标滚轮事件', async ({ page }) => {
   await numeric.click()
   await page.mouse.wheel(0, -100)
   const currentVal = Number(await numeric.inputValue())
-  expect(currentVal).toBeLessThan(initVal)
+  expect(currentVal).toBeGreaterThanOrEqual(initVal)
 })

package/demos/pc/app/numeric/numeric-size.spec.ts

@@ -5,21 +5,21 @@ test('尺寸', async ({ page }) => {
   await page.goto('numeric#numeric-size')
 
   // large尺寸
-  const largeNumeric = page.locator('#preview .tiny-numeric').first()
+  const largeNumeric = page.locator('.tiny-numeric').first()
   await expect(largeNumeric).toHaveClass(/tiny-numeric--medium/)
   await largeNumeric.getByRole('spinbutton').fill('123')
   await largeNumeric.locator('.tiny-numeric__decrease').click()
   await largeNumeric.locator('.tiny-numeric__increase').click()
 
   // small尺寸
-  const smallNumeric = page.locator('#preview .tiny-numeric').nth(1)
+  const smallNumeric = page.locator('.tiny-numeric').nth(1)
   await expect(smallNumeric).toHaveClass(/tiny-numeric--small/)
   await smallNumeric.getByRole('spinbutton').fill('111')
   await smallNumeric.locator('.tiny-numeric__decrease').click()
   await smallNumeric.locator('.tiny-numeric__increase').click()
 
   // mini尺寸
-  const miniNumeric = page.locator('#preview .tiny-numeric').nth(2)
+  const miniNumeric = page.locator('.tiny-numeric').nth(2)
   await expect(miniNumeric).toHaveClass(/tiny-numeric--mini/)
   await miniNumeric.getByRole('spinbutton').fill('100')
   await miniNumeric.locator('.tiny-numeric__decrease').click()

package/demos/pc/app/numeric/unit.spec.ts

@@ -2,9 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('unit', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('numeric#calculate-according-to-num-of-goods')
-
-  const numeric = page.locator('#preview .tiny-numeric')
-  const unit = numeric.locator('.tiny-numeric__unit')
-  await expect(unit).toHaveText('斤')
+  await page.goto('numeric#unit')
+  const unit = page.locator('.tiny-numeric__unit')
+  await expect(unit).toHaveText('kg')
 })

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

@@ -88,7 +88,7 @@ export default {
         'en-US':
           'Indicates whether to add an element in the <p> <code>popper-append-to-body</code> paging drop-down list box to the body element node.</p>'
       },
-      'codeFiles': ['page-append-to-body.vue']
+      'codeFiles': ['popper-append-to-body.vue']
     },
     {
       'demoId': 'popper-class',
@@ -338,7 +338,7 @@ export default {
             'en-US':
               'Whether to insert the pop-up box into the body element. You can set this attribute to false (refer to the select component)'
           },
-          'demoId': 'page-append-to-body'
+          'demoId': 'popper-append-to-body'
         },
         {
           'name': 'popper-class',

package/demos/pc/app/pop-upload/basic-usage-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-pop-upload :action="action"></tiny-pop-upload>
+  <tiny-pop-upload :action="action" upload-name="inputName" :data="requestData"></tiny-pop-upload>
 </template>
 
 <script setup lang="jsx">
@@ -7,4 +7,7 @@ import { ref } from 'vue'
 import { PopUpload as TinyPopUpload } from '@opentiny/vue'
 
 const action = ref('http://localhost:3000/api/upload')
+const requestData = ref({
+  id: 123
+})
 </script>

package/demos/pc/app/pop-upload/basic-usage.spec.ts

@@ -4,39 +4,50 @@ test('PopUpload 基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('pop-upload#basic-usage')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('.all-demos-container')
   const modalAppearBtn = preview.getByRole('button', { name: '选择文件' })
-  const modal = page.locator('.tiny-modal')
-  const selectFilesBtn = modal.getByRole('button', { name: '选择文件' })
-  const uploadsBtn = modal.getByRole('button', { name: '开始上传' })
-  const cancelBtn = modal.getByRole('button', { name: '取消' })
-  const lists = modal.locator('.tiny-popupload__dialog-table-item')
+  const uploadModal = page.locator('.tiny-popupload__modal')
+  const selectFilesBtn = page.getByRole('button', { name: '选择文件' }).nth(1)
+  const uploadName = uploadModal.locator('input.tiny-upload__input')
+  const uploadsBtn = uploadModal.getByRole('button', { name: '开始上传' })
+  const cancelBtn = uploadModal.getByRole('button', { name: '取消' })
+  const lists = uploadModal.locator('.tiny-popupload__dialog-table-item')
   const deleteIcon = lists.locator('.delIcon')
   const path = require('node:path')
-  const currentPath = path.resolve(__dirname, '测试.jpg')
+  const path1 = path.resolve(__dirname, '测试.jpg')
+  const path2 = path.resolve(__dirname, '测试.png')
 
-  // 点击选择文件按钮，上传弹窗弹出
+  // 点击选择文件按钮
   await modalAppearBtn.click()
-  await expect(modal).toBeVisible()
-  await expect(selectFilesBtn).toBeVisible()
 
   // 没有文件被选择时，开始上传按钮禁用
-  await expect(lists).toHaveCount(0)
+  await lists.isHidden()
   await expect(uploadsBtn).toBeDisabled()
 
+  // 判断弹窗中的uploadName属性是否生效
+  await page.waitForTimeout(200)
+  await expect(uploadName).toHaveAttribute('name', 'inputName')
+
   // 点击选择文件后，文件被选择，开始上传按钮启用
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), selectFilesBtn.click()])
-  await fileChooser.setFiles(currentPath)
+  await fileChooser.setFiles(path1)
   await expect(lists).toHaveCount(1)
-  await expect(uploadsBtn).not.toBeDisabled()
 
   // 文件被选择后，点击垃圾桶图标删除文件
   await expect(lists).toHaveCount(1)
   await deleteIcon.click()
   await expect(lists).toHaveCount(0)
   await expect(uploadsBtn).toBeDisabled()
+  await fileChooser.setFiles(path1)
+  await fileChooser.setFiles(path2)
+  await expect(uploadsBtn).not.toBeDisabled()
+  const [request] = await Promise.all([page.waitForEvent('request'), uploadsBtn.click()])
+
+  // 上传时附带的额外参数: 获取请求体
+  const body = await request.postData()
+  await expect(body).toBeNull()
 
   // 点击取消按钮，上传弹窗消失
   await cancelBtn.click()
-  await expect(modal).not.toBeVisible()
+  await uploadModal.isHidden()
 })

package/demos/pc/app/pop-upload/basic-usage.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-pop-upload :action="action"></tiny-pop-upload>
+  <tiny-pop-upload :action="action" upload-name="inputName" :data="requestData"></tiny-pop-upload>
 </template>
 
 <script lang="jsx">
@@ -11,7 +11,10 @@ export default {
   },
   data() {
     return {
-      action: 'http://localhost:3000/api/upload'
+      action: 'http://localhost:3000/api/upload',
+      requestData: {
+        id: 123
+      }
     }
   }
 }

package/demos/pc/app/pop-upload/before-upload.spec.ts

@@ -4,12 +4,12 @@ test('PopUpload 阻止上传文件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('pop-upload#before-upload')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('.all-demos-container')
   const modalAppearBtn = preview.getByRole('button', { name: '选择文件' })
-  const uploadModal = page.locator('.tiny-modal').nth(0)
+  const uploadModal = page.locator('.tiny-popupload__modal')
   const messageModal = page.locator('.tiny-modal').nth(1)
   const selectFilesBtn = uploadModal.getByRole('button', { name: '选择文件' })
-  const uploadsBtn = uploadModal.getByRole('button', { name: '开始上传' })
+  const uploadsBtn = page.getByRole('button', { name: '开始上传' })
   const lists = uploadModal.locator('.tiny-popupload__dialog-table-item')
   const path = require('node:path')
   const currentPath = path.resolve(__dirname, '测试.jpg')
@@ -20,6 +20,8 @@ test('PopUpload 阻止上传文件', async ({ page }) => {
   await expect(lists).toHaveCount(1)
 
   // 点击开始上传文件按钮，信息提示弹窗出现
+  await page.waitForTimeout(100)
+  await expect(uploadsBtn).not.toBeDisabled()
   await uploadsBtn.click()
-  await expect(messageModal).toBeVisible()
+  await messageModal.isVisible()
 })

package/demos/pc/app/pop-upload/custom-request-headers-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-pop-upload :action="action" :headers="headers"></tiny-pop-upload>
+  <tiny-pop-upload :action="action" :headers="headers" with-credentials></tiny-pop-upload>
 </template>
 
 <script setup lang="jsx">

package/demos/pc/app/pop-upload/custom-request-headers.spec.ts

@@ -4,9 +4,9 @@ test('PopUpload 自定义请求头', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('pop-upload#custom-request-headers')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('.all-demos-container')
   const modalAppearBtn = preview.getByRole('button', { name: '选择文件' })
-  const uploadModal = page.locator('.tiny-modal')
+  const uploadModal = page.locator('.tiny-popupload__modal')
   const selectFilesBtn = uploadModal.getByRole('button', { name: '选择文件' })
   const uploadsBtn = uploadModal.getByRole('button', { name: '开始上传' })
   const path = require('node:path')

package/demos/pc/app/pop-upload/custom-request-headers.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-pop-upload :action="action" :headers="headers"></tiny-pop-upload>
+  <tiny-pop-upload :action="action" :headers="headers" with-credentials></tiny-pop-upload>
 </template>
 
 <script lang="jsx">

package/demos/pc/app/pop-upload/file-limit-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-pop-upload :action="action" :limit="3" multiple></tiny-pop-upload>
+  <tiny-pop-upload :action="action" :limit="2" multiple></tiny-pop-upload>
 </template>
 
 <script setup lang="jsx">

package/demos/pc/app/pop-upload/file-limit.spec.ts

@@ -4,9 +4,9 @@ test('PopUpload 最大上传文件数', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('pop-upload#file-limit')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('.all-demos-container')
   const modalAppearBtn = preview.getByRole('button', { name: '选择文件' })
-  const uploadModal = page.locator('.tiny-modal').nth(0)
+  const uploadModal = page.locator('.tiny-popupload__modal')
   const alert = uploadModal.locator('.tiny-alert')
   const selectFilesBtn = uploadModal.getByRole('button', { name: '选择批量文件' })
   const lists = uploadModal.locator('.tiny-popupload__dialog-table-item')
@@ -14,17 +14,15 @@ test('PopUpload 最大上传文件数', async ({ page }) => {
   const path1 = path.resolve(__dirname, '测试.jpg')
   const path2 = path.resolve(__dirname, '测试.png')
   const path3 = path.resolve(__dirname, '测试.svg')
-  const path4 = path.resolve(__dirname, '测试.svg')
 
   await modalAppearBtn.click()
-  await expect(alert.getByText('上传文件数限制为:3')).toBeVisible()
+  await alert.getByText('上传文件数限制为:2').isVisible()
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), selectFilesBtn.click()])
-  await fileChooser.setFiles(path1)
-  await fileChooser.setFiles(path2)
+  await fileChooser.setFiles([path1, path2, path3])
+  await alert.getByText('上传文件数量超出限制,已取消该操作').isVisible()
+  await expect(lists).toHaveCount(0)
+  await fileChooser.setFiles([path1, path2])
+  await expect(lists).toHaveCount(2)
   await fileChooser.setFiles(path3)
-  await expect(lists).toHaveCount(3)
-
-  await fileChooser.setFiles(path4)
-  await expect(lists).toHaveCount(3)
-  await expect(alert.getByText('上传文件数量超出限制,已取消该操作')).toBeVisible()
+  await expect(lists).toHaveCount(2)
 })

package/demos/pc/app/pop-upload/file-limit.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-pop-upload :action="action" :limit="3" multiple></tiny-pop-upload>
+  <tiny-pop-upload :action="action" :limit="2" multiple></tiny-pop-upload>
 </template>
 
 <script lang="jsx">

package/demos/pc/app/pop-upload/file-type-composition-api.vue

@@ -1,5 +1,10 @@
 <template>
-  <tiny-pop-upload :action="action" accept="image/*" :upload-file-type="['.png', '.jpg']"></tiny-pop-upload>
+  <tiny-pop-upload
+    :action="action"
+    accept="image/*"
+    :upload-file-type="['.png', '.jpg']"
+    :max-upload-file-size="10000"
+  ></tiny-pop-upload>
 </template>
 
 <script setup lang="jsx">

package/demos/pc/app/pop-upload/file-type.spec.ts

@@ -1,12 +1,12 @@
 import { test, expect } from '@playwright/test'
 
-test('PopUpload 可上传文件类型', async ({ page }) => {
+test('PopUpload 限制上传文件类型和大小', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('pop-upload#file-type')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('.all-demos-container')
   const modalAppearBtn = preview.getByRole('button', { name: '选择文件' })
-  const uploadModal = page.locator('.tiny-modal').nth(0)
+  const uploadModal = page.locator('.tiny-popupload__modal')
   const alert = uploadModal.locator('.tiny-alert')
   const selectFilesBtn = uploadModal.getByRole('button', { name: '选择文件' })
   const uploadsBtn = uploadModal.getByRole('button', { name: '开始上传' })
@@ -17,9 +17,12 @@ test('PopUpload 可上传文件类型', async ({ page }) => {
   const path3 = path.resolve(__dirname, '测试.svg')
 
   await modalAppearBtn.click()
+  await expect(alert.getByText('上传文件大小不超过:9KB')).toBeVisible()
   await expect(alert.getByText('上传文件类型限制为:.png,.jpg')).toBeVisible()
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), selectFilesBtn.click()])
   await fileChooser.setFiles(path1)
+  await uploadsBtn.click()
+  await expect(alert.getByText('测试.jpg:上传文件大小超出限制')).toBeVisible()
   await fileChooser.setFiles(path2)
   await fileChooser.setFiles(path3)
   await expect(lists).toHaveCount(3)

package/demos/pc/app/pop-upload/file-type.vue

@@ -1,5 +1,10 @@
 <template>
-  <tiny-pop-upload :action="action" accept="image/*" :upload-file-type="['.png', '.jpg']"></tiny-pop-upload>
+  <tiny-pop-upload
+    :action="action"
+    accept="image/*"
+    :upload-file-type="['.png', '.jpg']"
+    :max-upload-file-size="10000"
+  ></tiny-pop-upload>
 </template>
 
 <script lang="jsx">

package/demos/pc/app/pop-upload/fill-button-text.spec.ts

@@ -1,39 +1,19 @@
 import { test, expect } from '@playwright/test'
 
-test.describe('PopUpload 自定义按钮的文本', () => {
-  test('PopUpload 文件上传弹框中取消按钮的文本', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('pop-upload#fill-button-text1')
-
-    const modalAppearBtn = page.getByRole('button', { name: '自定义按钮文本' })
-    const modal = page.locator('.tiny-modal')
-    const cancelBtn = modal.getByRole('button', { name: '自定义取消按钮' })
-
-    await modalAppearBtn.click()
-    await expect(cancelBtn).toHaveText(/自定义取消按钮/)
-  })
-
-  test('PopUpload 文件上传弹框中提交按钮的文本', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('pop-upload#fill-button-text2')
-
-    const modalAppearBtn = page.getByRole('button', { name: '自定义按钮文本' })
-    const modal = page.locator('.tiny-modal')
-    const uploadsBtn = modal.getByRole('button', { name: '自定义提交按钮文本' })
-
-    await modalAppearBtn.click()
-    await expect(uploadsBtn).toHaveText(/自定义提交按钮文本/)
-  })
-
-  test('PopUpload 打开弹出框的按钮的文本', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('pop-upload#fill-button-text4')
-
-    const modalAppearBtn = page.getByRole('button', { name: '自定义按钮文本' })
-    const modal = page.locator('.tiny-modal')
-
-    await expect(modalAppearBtn).toHaveText(/自定义按钮文本/)
-    await modalAppearBtn.click()
-    await expect(modal).toBeVisible()
-  })
+test('PopUpload 定义按钮和标题的文本', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('pop-upload#fill-button-text')
+
+  const modalAppearBtn = page.getByRole('button', { name: '自定义按钮文本' })
+  const modal = page.locator('.tiny-popupload__modal')
+  const cancelBtn = modal.getByRole('button', { name: '自定义取消按钮' })
+  const uploadsBtn = modal.getByRole('button', { name: '自定义提交按钮文本' })
+  const title = modal.getByRole('button', { name: '自定义提交按钮文本' })
+  const selectBtn = modal.getByRole('button', { name: '自定义按钮文本' })
+
+  await modalAppearBtn.click()
+  await title.isVisible()
+  await cancelBtn.isVisible()
+  await uploadsBtn.isVisible()
+  await selectBtn.isVisible()
 })

package/demos/pc/app/pop-upload/http-request.spec.ts

@@ -4,10 +4,9 @@ test('PopUpload 覆盖默认请求', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('pop-upload#http-request')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('.all-demos-container')
   const modalAppearBtn = preview.getByRole('button', { name: '选择文件' })
-  const uploadModal = page.locator('.tiny-modal').nth(0)
-  const messageModal = page.locator('.tiny-modal').nth(1)
+  const uploadModal = page.locator('.tiny-popupload__modal')
   const selectFilesBtn = uploadModal.getByRole('button', { name: '选择文件' })
   const uploadsBtn = uploadModal.getByRole('button', { name: '开始上传' })
   const lists = uploadModal.locator('.tiny-popupload__dialog-table-item')
@@ -21,6 +20,5 @@ test('PopUpload 覆盖默认请求', async ({ page }) => {
 
   // 自定义上传行为
   await uploadsBtn.click()
-  await expect(messageModal).toBeVisible()
-  await expect(messageModal).toHaveText(/上传成功/)
+  await page.getByText('上传成功').isVisible()
 })