@opentiny/vue-docs 2.2.6 → 2.2.7

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

@@ -4,9 +4,9 @@ test('PopUpload 阻止删除文件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('pop-upload#prevent-delete-file')
 
-  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 deleteModal = page.locator('.tiny-modal').nth(1)
   const selectFilesBtn = uploadModal.getByRole('button', { name: '选择文件' })
   const lists = uploadModal.locator('.tiny-popupload__dialog-table-item')

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

@@ -4,7 +4,7 @@ test('PopUpload 设置组件大小', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('pop-upload#size')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('.all-demos-container')
   const modalAppearBtn = preview.getByRole('button', { name: '选择文件' })
 
   await expect(modalAppearBtn).toHaveClass(/tiny-button--medium/)

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

@@ -0,0 +1,39 @@
+<template>
+  <tiny-pop-upload
+    :action="action"
+    multiple
+    :limit="2"
+    @remove="handleRemove"
+    @error="handleError"
+    @exceed="handleExceed"
+    @progress="handleProgress"
+    @success="handleSuccess"
+  ></tiny-pop-upload>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { PopUpload as TinyPopUpload, Modal } from '@opentiny/vue'
+
+const action = ref('http://localhost:3000/api/upload')
+
+function handleRemove() {
+  Modal.message('触发删除文件回调事件')
+}
+
+function handleProgress() {
+  Modal.message('文件上传时的回调 返回进程')
+}
+
+function handleError() {
+  Modal.message('文件上传失败回调')
+}
+
+function handleExceed() {
+  Modal.message('触发文件超出个数限制回调事件')
+}
+
+function handleSuccess() {
+  Modal.message('触发上传文件成功回调事件')
+}
+</script>

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

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test'
+
+test('事件是否正常触发', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('pop-upload#upload-events')
+
+  const preview = page.locator('.all-demos-container')
+  const modalAppearBtn = preview.getByRole('button', { name: '选择文件' })
+  const uploadModal = page.locator('.tiny-popupload__modal')
+  const selectFilesBtn = uploadModal.getByRole('button', { name: '选择批量文件' })
+  const uploadsBtn = page.getByRole('button', { name: '开始上传' })
+  const lists = uploadModal.locator('.tiny-popupload__dialog-table-item')
+  const deleteIcon = uploadModal.getByRole('listitem').locator('svg')
+  const path = require('node:path')
+  const currentPath1 = path.resolve(__dirname, '测试.jpg')
+  const currentPath2 = path.resolve(__dirname, '测试.png')
+  const currentPath3 = path.resolve(__dirname, '测试.svg')
+
+  // 点击选择文件按钮，上传弹窗弹出
+  await modalAppearBtn.click()
+
+  // 没有文件被选择时，开始上传按钮禁用
+  await expect(lists).toHaveCount(0)
+  await expect(uploadsBtn).toBeDisabled()
+
+  // 点击选择文件后，文件被选择，开始上传按钮启用
+  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), selectFilesBtn.click()])
+  await fileChooser.setFiles([currentPath1, currentPath2, currentPath3])
+  await page.getByText('触发文件超出个数限制回调事件').isVisible()
+
+  await fileChooser.setFiles(currentPath1)
+  await deleteIcon.click()
+  await page.getByText('触发删除文件回调事件').isVisible()
+
+  await page.waitForTimeout(200)
+  await fileChooser.setFiles(currentPath2)
+  await uploadsBtn.click()
+  await page.getByText('文件上传失败回调').isVisible()
+})

package/demos/pc/app/pop-upload/upload-events.vue

@@ -0,0 +1,44 @@
+<template>
+  <tiny-pop-upload
+    :action="action"
+    multiple
+    :limit="2"
+    @remove="handleRemove"
+    @error="handleError"
+    @exceed="handleExceed"
+    @progress="handleProgress"
+    @success="handleSuccess"
+  ></tiny-pop-upload>
+</template>
+
+<script lang="jsx">
+import { PopUpload, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyPopUpload: PopUpload
+  },
+  data() {
+    return {
+      action: 'http://localhost:3000/api/upload'
+    }
+  },
+  methods: {
+    handleRemove() {
+      Modal.message('触发删除文件回调事件')
+    },
+    handleProgress() {
+      Modal.message('文件上传时的回调 返回进程')
+    },
+    handleError() {
+      Modal.message('文件上传失败回调')
+    },
+    handleExceed() {
+      Modal.message('触发文件超出个数限制回调事件')
+    },
+    handleSuccess() {
+      Modal.message('触发上传文件成功回调事件')
+    }
+  }
+}
+</script>

package/demos/pc/app/pop-upload/webdoc/pop-upload.cn.md

@@ -4,4 +4,4 @@ title: PopUpload 弹出框上传
 
 # PopUpload 弹出框上传
 
-<div>点击所设置的元素，弹出上传对话框。</div>
+<div>在弹出的对话框里，实现上传操作和展示。</div>

package/demos/pc/app/pop-upload/webdoc/pop-upload.en.md

@@ -1,7 +1,7 @@
 ---
-title: PopUpload dialog box
+title: PopUpload
 ---
 
-# PopUpload dialog box
+# PopUpload
 
-<div>Click the element to display the upload dialog box.</div>
+<div>In the pop-up dialog box, implement the upload operation and display.</div>