forked from opentiny/tiny-vue
fix(pop-upload): [pop-upload] Optimized the document and added e2e test cases. (#1079)
* docs(pop-upload): [pop-upload] Optimization and supplementation of document examples * test(pop-upload): [pop-upload] Add e2e test cases
This commit is contained in:
chenxi-20
GitHub
parent
6338e47220
commit
e20c7e8465
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
<template>
|
||||
<tiny-pop-upload :action="action" :data="requestData"></tiny-pop-upload>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { PopUpload as TinyPopUpload } from '@opentiny/vue'
|
||||
|
||||
const requestData = ref({
|
||||
id: 123
|
||||
})
|
||||
const action = ref('http://localhost:3000/api/upload')
|
||||
</script>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('PopUpload 上传时附带的额外参数', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('pop-upload#data')
|
||||
|
||||
const preview = page.locator('#preview')
|
||||
const modalAppearBtn = preview.getByRole('button', { name: '选择文件' })
|
||||
const uploadModal = page.locator('.tiny-modal')
|
||||
const selectFilesBtn = uploadModal.getByRole('button', { name: '选择文件' })
|
||||
const uploadsBtn = uploadModal.getByRole('button', { name: '开始上传' })
|
||||
const path = require('node:path')
|
||||
const currentPath = path.resolve(__dirname, '测试.jpg')
|
||||
|
||||
await modalAppearBtn.click()
|
||||
const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), selectFilesBtn.click()])
|
||||
await fileChooser.setFiles(currentPath)
|
||||
|
||||
// 获取请求体
|
||||
const [request] = await Promise.all([page.waitForEvent('request'), uploadsBtn.click()])
|
||||
const body = await request.postData()
|
||||
|
||||
await expect(body).toBeNull()
|
||||
})
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<template>
|
||||
<tiny-pop-upload :action="action" :data="requestData"></tiny-pop-upload>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { PopUpload } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyPopUpload: PopUpload
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
requestData: {
|
||||
id: 123
|
||||
},
|
||||
action: 'http://localhost:3000/api/upload'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
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-modal')
|
||||
const cancelBtn = modal.getByRole('button', { name: '自定义取消按钮' })
|
||||
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 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()
|
||||
})
|
||||
await modalAppearBtn.click()
|
||||
await title.isVisible()
|
||||
await cancelBtn.isVisible()
|
||||
await uploadsBtn.isVisible()
|
||||
await selectBtn.isVisible()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
<template>
|
||||
<tiny-pop-upload :action="action" :max-upload-file-size="10000"></tiny-pop-upload>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { PopUpload as TinyPopUpload } from '@opentiny/vue'
|
||||
|
||||
const action = ref('http://localhost:3000/api/upload')
|
||||
</script>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('PopUpload 可上传文件大小', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('pop-upload#max-upload-file-size')
|
||||
|
||||
const preview = page.locator('#preview')
|
||||
const modalAppearBtn = preview.getByRole('button', { name: '选择文件' })
|
||||
const uploadModal = page.locator('.tiny-modal').nth(0)
|
||||
const alert = uploadModal.locator('.tiny-alert')
|
||||
const selectFilesBtn = uploadModal.getByRole('button', { name: '选择文件' })
|
||||
const uploadsBtn = uploadModal.getByRole('button', { name: '开始上传' })
|
||||
const lists = uploadModal.locator('.tiny-popupload__dialog-table-item')
|
||||
const path = require('node:path')
|
||||
const currentPath = path.resolve(__dirname, '测试.jpg')
|
||||
|
||||
await modalAppearBtn.click()
|
||||
await expect(alert.getByText('上传文件大小不超过:9KB')).toBeVisible()
|
||||
const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), selectFilesBtn.click()])
|
||||
await fileChooser.setFiles(currentPath)
|
||||
await expect(lists).toHaveCount(1)
|
||||
await uploadsBtn.click()
|
||||
await expect(alert.getByText('测试.jpg:上传文件大小超出限制')).toBeVisible()
|
||||
})
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<tiny-pop-upload :action="action" :max-upload-file-size="10000"></tiny-pop-upload>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { PopUpload } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyPopUpload: PopUpload
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
action: 'http://localhost:3000/api/upload'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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/)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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()
|
||||
})
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<template>
|
||||
<tiny-pop-upload :action="action" upload-name="file" with-credentials></tiny-pop-upload>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { PopUpload as TinyPopUpload } from '@opentiny/vue'
|
||||
|
||||
const action = ref('http://localhost:3000/api/upload')
|
||||
</script>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test.describe('PopUpload 上传的文件字段名和发送 cookie 凭证信息', () => {
|
||||
const path = require('node:path')
|
||||
const currentPath = path.resolve(__dirname, '测试.jpg')
|
||||
|
||||
test('PopUpload 上传的文件字段名', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('pop-upload#upload-name1')
|
||||
|
||||
const preview = page.locator('#preview')
|
||||
const modalAppearBtn = preview.getByRole('button', { name: '选择文件' })
|
||||
const uploadModal = page.locator('.tiny-modal')
|
||||
const selectFilesBtn = uploadModal.getByRole('button', { name: '选择文件' })
|
||||
const uploadsBtn = uploadModal.getByRole('button', { name: '开始上传' })
|
||||
|
||||
await modalAppearBtn.click()
|
||||
const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), selectFilesBtn.click()])
|
||||
await fileChooser.setFiles(currentPath)
|
||||
|
||||
const [request] = await Promise.all([page.waitForEvent('request'), uploadsBtn.click()])
|
||||
const headers = await request.headers()
|
||||
|
||||
await expect(headers).not.toBeNull()
|
||||
})
|
||||
|
||||
test(' 发送 cookie 凭证信息', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('pop-upload#upload-name')
|
||||
|
||||
const preview = page.locator('#preview')
|
||||
const modalAppearBtn = preview.getByRole('button', { name: '选择文件' })
|
||||
const uploadModal = page.locator('.tiny-modal')
|
||||
const selectFilesBtn = uploadModal.getByRole('button', { name: '选择文件' })
|
||||
const uploadsBtn = uploadModal.getByRole('button', { name: '开始上传' })
|
||||
|
||||
await modalAppearBtn.click()
|
||||
const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), selectFilesBtn.click()])
|
||||
await fileChooser.setFiles(currentPath)
|
||||
|
||||
const [request] = await Promise.all([page.waitForEvent('request'), uploadsBtn.click()])
|
||||
const header = await request.headers()
|
||||
|
||||
await expect(header).not.toBeNull()
|
||||
})
|
||||
})
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<tiny-pop-upload :action="action" upload-name="file" with-credentials></tiny-pop-upload>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { PopUpload } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyPopUpload: PopUpload
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
action: 'http://localhost:3000/api/upload'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -4,4 +4,4 @@ title: PopUpload 弹出框上传
|
|||
|
||||
# PopUpload 弹出框上传
|
||||
|
||||
<div>点击所设置的元素，弹出上传对话框。</div>
|
||||
<div>在弹出的对话框里，实现上传操作和展示。</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -4,157 +4,183 @@ export default {
|
|||
demos: [
|
||||
{
|
||||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic usage' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>action</code> 属性设置上传的服务接口。</p>\n',
|
||||
'en-US': '<p>Set the upload service interface through the <code>action</code> attribute. </p>\n'
|
||||
'zh-CN': `通过 <code>action</code> 设置上传的服务接口， <code>upload-name</code> 设置上传的文件字段名，<code>data</code> 自定义上传时附带的额外参数。`,
|
||||
'en-US': `Set the service interface for uploading through<code>action</code>,<code>upload-name</code>set the file field name for uploading,
|
||||
and<code>data</code>customize the additional parameters that come with uploading.`
|
||||
},
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'custom-request-headers',
|
||||
'name': { 'zh-CN': '自定义请求头', 'en-US': 'Custom Request Header' },
|
||||
'name': { 'zh-CN': '请求头部配置', 'en-US': 'Request header configuration' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>headers</code> 属性自定义上传请求头信息。</p>\n',
|
||||
'zh-CN':
|
||||
'通过 <code>with-credentials</code> 开启支持发送 cookie 凭证信息，<code>headers</code> 自定义上传请求头信息。',
|
||||
'en-US':
|
||||
'<p>The <code>headers</code> attribute is used to customize the upload request header information. </p>\n'
|
||||
'Enable support for sending cookie credential information through<code>with-credentials</code>, and customize upload request header information through<code>headers</code>.'
|
||||
},
|
||||
'codeFiles': ['custom-request-headers.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'data',
|
||||
'name': { 'zh-CN': '上传时附带的额外参数', 'en-US': 'Extra parameters attached during upload' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>data</code> 属性自定义上传时附带的额外参数。</p>\n',
|
||||
'en-US':
|
||||
'<p>The <code>data</code> attribute is used to customize the additional parameters attached to the upload. </p>\n'
|
||||
},
|
||||
'codeFiles': ['data.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'size',
|
||||
'name': { 'zh-CN': '设置组件大小', 'en-US': 'Set Component Size' },
|
||||
'name': { 'zh-CN': '尺寸和禁用', 'en-US': 'Size and disabled' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>可设置为：<code>medium</code>，<code>small</code>，<code>mini</code>\n通过 <code>disabled</code> 属性设置是否禁用，默认值为 false 。</p>\n',
|
||||
'通过 <code>medium</code>，<code>small</code>，<code>mini</code> 设置组件尺寸，<code>disabled</code> 设置是否禁用，默认值为 false 。',
|
||||
'en-US':
|
||||
'<p>The options are as follows: <code>medium</code>, <code>small</code>, <code>mini</code>\nThe <code>disabled</code> attribute is used to set whether to disable. The default value is false. </p>\n'
|
||||
'Set the component size through<code>media</code>,<code>small</code>,<code>mini</code>, and whether to <code>disabled</code> it. The default value is false.'
|
||||
},
|
||||
'codeFiles': ['size.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'http-request',
|
||||
'name': { 'zh-CN': '覆盖默认请求', 'en-US': 'Override the default request' },
|
||||
'name': { 'zh-CN': '自定义上传', 'en-US': 'Custom Upload' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过配置 <code>http-request</code> 覆盖默认的上传行为，可以自定义上传的实现</p>\n',
|
||||
'zh-CN': '通过 <code>http-request</code> 配置覆盖默认的上传行为，自定义上传的实现。',
|
||||
'en-US':
|
||||
'<p>You can configure <code>http-request</code> to overwrite the default upload behavior and customize the upload implementation</p>\n'
|
||||
'You can configure <code>http-request</code> to overwrite the default upload behavior and customize the upload implementation'
|
||||
},
|
||||
'codeFiles': ['http-request.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'upload-name1',
|
||||
'name': { 'zh-CN': '上传的文件字段名', 'en-US': 'Field name of the uploaded file' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>upload-name</code> 属性设置上传的文件字段名，默认值为 file 。</p>\n',
|
||||
'en-US':
|
||||
'<p>Use the <code>upload-name</code> attribute to set the field name of the file to be uploaded. The default value is file. </p>\n'
|
||||
},
|
||||
'codeFiles': ['upload-name.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'upload-name',
|
||||
'name': { 'zh-CN': '发送 cookie 凭证信息', 'en-US': 'Send cookie credential information' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'codeFiles': ['upload-name.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'fill-button-text1',
|
||||
'demoId': 'fill-button-text',
|
||||
'name': {
|
||||
'zh-CN': '文件上传弹框中取消按钮的文本',
|
||||
'en-US': 'Text of the Cancel button in the dialog box for uploading files'
|
||||
'zh-CN': '定义按钮和标题',
|
||||
'en-US': 'Define Buttons And Titles'
|
||||
},
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>cancel-button-text</code> 属性指定取消按钮的文本内容</p>\n',
|
||||
'en-US':
|
||||
'<p>Specify the text content of the cancel button through the <code>cancel-button-text</code> attribute</p>\n'
|
||||
'zh-CN': `通过 <code>dialog-title</code> 设置弹框的标题，<code>cancel-button-text</code> 设置取消按钮的文本,
|
||||
<code>submit-button-text</code> 设置提交按钮的文本， <code>cancel-button-text</code> 设置上传按钮的文本。`,
|
||||
'en-US': `Set the title of the pop-up box through<code>dialog-title</code>, and set the text of the cancel button through<code>cancel-button-text</code>,
|
||||
<code>submit-button-text</code>Set the text for the submit button,<code>cancel-button-text</code>Set the text for the upload button.`
|
||||
},
|
||||
'codeFiles': ['fill-button-text.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'fill-button-text2',
|
||||
'name': {
|
||||
'zh-CN': '文件上传弹框中提交按钮的文本',
|
||||
'en-US': 'Text of the Submit button in the dialog box for uploading files'
|
||||
},
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'codeFiles': ['fill-button-text.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'fill-button-text4',
|
||||
'name': { 'zh-CN': '打开弹出框的按钮的文本', 'en-US': 'Text of the button for opening a dialog box' },
|
||||
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
|
||||
'codeFiles': ['fill-button-text.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'file-limit',
|
||||
'name': { 'zh-CN': '最大上传文件数', 'en-US': 'Maximum number of files to be uploaded' },
|
||||
'name': { 'zh-CN': '上传数限制', 'en-US': 'Upload Quantity Limit' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>limit</code> 属性可以指定最大上传的文件数量，配置 <code>multiple</code> 属性后可同时选择多个文件。</p>\n',
|
||||
'zh-CN': '通过 <code>limit</code> 设置最大上传的文件数量，<code>multiple</code> 设置是否可同时选择多个文件。',
|
||||
'en-US':
|
||||
'<p>You can use the <code>limit</code> attribute to specify the maximum number of files to be uploaded. After the <code>multiple</code> attribute is configured, you can select multiple files at the same time. </p>\n'
|
||||
'Set the maximum number of uploaded files through<code>limit</code>, and whether <code>multiple</code> files can be selected simultaneously.'
|
||||
},
|
||||
'codeFiles': ['file-limit.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'file-type',
|
||||
'name': { 'zh-CN': '可上传文件类型', 'en-US': 'File types that can be uploaded' },
|
||||
'name': { 'zh-CN': '限制文件类型和大小', 'en-US': 'Restrict file types and sizes' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>accept</code> 属性可以对选择文件时的文件类型进行控制，而 <code>upload-file-type</code> 属性可以指定在上传时进行校验的文件类型。</p>\n',
|
||||
'通过 <code>max-upload-file-size</code> 设置上传文件的大小， <code>accept</code> 设置可上传的文件类型，还可通过 <code>upload-file-type</code> 指定在上传时进行校验的文件类型。',
|
||||
'en-US':
|
||||
'<p>The <code>accept</code> attribute can be used to control the file type when a file is selected, and the <code>upload-file-type</code> attribute can be used to specify the file type to be verified during upload. </p>\n'
|
||||
'Set the size of the uploaded file through<code>max-upload-file-size</code>,<code>accept</code>to set the file types that can be uploaded, and also specify the file types to be verified during upload through<code>upload-file-type</code>.'
|
||||
},
|
||||
'codeFiles': ['file-type.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'max-upload-file-size',
|
||||
'name': { 'zh-CN': '可上传文件大小', 'en-US': 'Size of files that can be uploaded' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>max-upload-file-size</code> 属性指定可上传文件的大小。</p>\n',
|
||||
'en-US':
|
||||
'<p>The <code>max-upload-file-size</code> attribute specifies the size of the file that can be uploaded. </p>\n'
|
||||
},
|
||||
'codeFiles': ['max-upload-file-size.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'prevent-delete-file',
|
||||
'name': { 'zh-CN': '阻止删除文件', 'en-US': 'Do not delete files' },
|
||||
'name': { 'zh-CN': '阻止删除', 'en-US': 'Block deletion' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>:before-remove（移除文件前回调事件）,方法里面return true/false，表示是否可以删除</p>\n',
|
||||
'zh-CN':
|
||||
'在 <code>before-remove</code> 处理移除文件前的逻辑，若返回 false 或者返回 Promise 且被 reject，则阻止删除。',
|
||||
'en-US':
|
||||
'<p>:before-remove (callback event before removing a file). In the method, return true/false indicates whether the file can be deleted.</p>\n'
|
||||
'Process the logic before removing files in<code>before-remove</code>. If it returns false or Promise and is rejected, the deletion will be blocked.'
|
||||
},
|
||||
'codeFiles': ['prevent-delete-file.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'before-upload',
|
||||
'name': { 'zh-CN': '阻止上传文件', 'en-US': 'Do not upload files' },
|
||||
'name': { 'zh-CN': '阻止上传', 'en-US': 'Block uploads' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>:before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传</p>\n',
|
||||
'在 <code>before-upload</code> 回调中处理文件上传前的逻辑，若返回 false 或者返回 Promise 且被 reject，则阻止上传。',
|
||||
'en-US':
|
||||
'<p>:before-upload Indicates the hook before uploading a file. The parameter is the uploaded file. If false is returned or Promise is returned and rejected, the upload stops.</p>\n'
|
||||
'Process the logic before file upload in the<code>before-upload</code>callback. If it returns false or Promise and is rejected, the upload is blocked.'
|
||||
},
|
||||
'codeFiles': ['before-upload.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'upload-events',
|
||||
'name': { 'zh-CN': '事件', 'en-US': 'Event' },
|
||||
'desc': {
|
||||
'zh-CN': `<div class="tip custom-block"><code>remove</code> 监听文件移除事件；<br/> <code>error</code> 监听文件上传失败事件；<br/>
|
||||
<code>exceed</code> 监听文件超出个数限制事件；<br/> <code>progress</code> 监听文件上传过程事件；<br/>
|
||||
<code>success</code> 监听文件上传成功事件。</div>`,
|
||||
'en-US': `<div class="tip custom-block"> <code>remove</code> Listen for file removal events; <br /> <code>error</code> Listen for file upload failure events;<br />
|
||||
<code>exceeded</code> Listen for events where the number of files exceeds the limit; <br/> <code>progress</code> Listen for file upload process events;<br/>
|
||||
<code>success</code> Listen for file upload success events.</div>`
|
||||
},
|
||||
'codeFiles': ['upload-events.vue']
|
||||
}
|
||||
],
|
||||
apis: [
|
||||
{
|
||||
'name': 'pop-upload',
|
||||
'type': 'component',
|
||||
'properties': [
|
||||
'props': [
|
||||
{
|
||||
'name': 'accept',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '接受上传的文件类型', 'en-US': 'File type to be uploaded' },
|
||||
'demoId': 'file-type'
|
||||
},
|
||||
{
|
||||
'name': 'action',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '必选参数，设置上传的地址',
|
||||
'en-US': 'This parameter is mandatory and specifies the upload address.'
|
||||
},
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'before-remove',
|
||||
'type': '(file: IFile) => void',
|
||||
'typeAnchorName': 'file-upload#IFile',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'删除文件之间的钩子函数，若返回 false 或者返回 Promise 且被 reject，则取消删除，反之则执行删除；入参为点击删除的文件信息',
|
||||
'en-US':
|
||||
'Delete the hook function between files. If it returns false or Promise and is rejected, cancel the deletion. Otherwise, execute the deletion; Enter the file information that was deleted by clicking on the input parameter'
|
||||
},
|
||||
'demoId': 'prevent-delete-file'
|
||||
},
|
||||
{
|
||||
'name': 'before-upload',
|
||||
'type': '(file: IFile) => void',
|
||||
'typeAnchorName': 'file-upload#IFile',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'上传文件之前的钩子，若返回 false 或者返回 Promise 且被 reject，则停止上传，反之则继续上传；入参为上传的文件信息',
|
||||
'en-US':
|
||||
'If the hook before uploading the file returns false or Promise and is rejected, the upload will be stopped. Otherwise, the upload will continue; Enter the uploaded file information as input'
|
||||
},
|
||||
'demoId': 'before-upload'
|
||||
},
|
||||
{
|
||||
'name': 'cancel-button-text',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '设置文件上传弹框中取消按钮的文本；默认为 取消',
|
||||
'en-US': 'Set the text of the Cancel button in the file upload dialog box. The default value is Cancel'
|
||||
},
|
||||
'demoId': 'fill-button-text'
|
||||
},
|
||||
{
|
||||
'name': 'data',
|
||||
'type': 'ICustomObject',
|
||||
'typeAnchorName': 'ICustomObject',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '上传时附带的额外参数', 'en-US': 'Extra parameters attached during upload' },
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'dialog-title',
|
||||
'type': 'string',
|
||||
|
|
@ -163,7 +189,53 @@ export default {
|
|||
'zh-CN': '设置文件上传弹框的标题;默认为 文件上传',
|
||||
'en-US': 'Set the title of the file upload dialog box. The default value is file upload'
|
||||
},
|
||||
'demoId': 'fill-button-text1'
|
||||
'demoId': 'fill-button-text'
|
||||
},
|
||||
{
|
||||
'name': 'disabled',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '是否禁用;默认为 false', 'en-US': 'Whether to disable; The default value is false' },
|
||||
'demoId': 'size'
|
||||
},
|
||||
{
|
||||
'name': 'headers',
|
||||
'type': 'ICustomObject',
|
||||
'typeAnchorName': 'ICustomObject',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '设置上传的请求头部', 'en-US': 'Set the upload request header' },
|
||||
'demoId': 'custom-request-headers'
|
||||
},
|
||||
{
|
||||
'name': 'http-request',
|
||||
'type': '() => void',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '覆盖默认的上传行为，可以自定义上传的实现',
|
||||
'en-US': 'Overwrite the default upload behavior. You can customize the upload implementation.'
|
||||
},
|
||||
'demoId': 'http-request'
|
||||
},
|
||||
{
|
||||
'name': 'limit',
|
||||
'type': 'number',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '最大允许上传个数', 'en-US': 'Maximum number of files that can be uploaded' },
|
||||
'demoId': 'file-limit'
|
||||
},
|
||||
{
|
||||
'name': 'max-upload-file-size',
|
||||
'type': 'number',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '最大上传文件大小', 'en-US': 'Maximum size of files to be uploaded' },
|
||||
'demoId': 'max-upload-file-size'
|
||||
},
|
||||
{
|
||||
'name': 'multiple',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '是否支持多选文件', 'en-US': 'Specifies whether multiple files can be selected.' },
|
||||
'demoId': 'file-limit'
|
||||
},
|
||||
{
|
||||
'name': 'size',
|
||||
|
|
@ -181,62 +253,17 @@ export default {
|
|||
'en-US':
|
||||
'Set the text of the Submit button in the file upload dialog box. The default value is Start uploading'
|
||||
},
|
||||
'demoId': 'fill-button-text2'
|
||||
'demoId': 'fill-button-text'
|
||||
},
|
||||
{
|
||||
'name': 'cancel-button-text',
|
||||
'name': 'upload-button-text',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'defaultValue': "'选择文件'",
|
||||
'desc': {
|
||||
'zh-CN': '设置文件上传弹框中取消按钮的文本;默认为 取消',
|
||||
'en-US': 'Set the text of the Cancel button in the file upload dialog box. The default value is Cancel'
|
||||
'zh-CN': '打开弹出框的按钮的文本配置属性',
|
||||
'en-US': 'Text configuration attribute of the button for opening a dialog box'
|
||||
},
|
||||
'demoId': 'fill-button-text1'
|
||||
},
|
||||
{
|
||||
'name': 'action',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '必选参数，设置上传的地址',
|
||||
'en-US': 'This parameter is mandatory and specifies the upload address.'
|
||||
},
|
||||
'demoId': 'custom-request-headers'
|
||||
},
|
||||
{
|
||||
'name': 'headers',
|
||||
'type': 'object',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '设置上传的请求头部', 'en-US': 'Set the upload request header' },
|
||||
'demoId': 'custom-request-headers'
|
||||
},
|
||||
{
|
||||
'name': 'limit',
|
||||
'type': 'number',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '最大允许上传个数', 'en-US': 'Maximum number of files that can be uploaded' },
|
||||
'demoId': 'file-limit'
|
||||
},
|
||||
{
|
||||
'name': 'multiple',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '是否支持多选文件', 'en-US': 'Specifies whether multiple files can be selected.' },
|
||||
'demoId': 'file-limit'
|
||||
},
|
||||
{
|
||||
'name': 'disabled',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '是否禁用;默认为 false', 'en-US': 'Whether to disable; The default value is false' },
|
||||
'demoId': 'size'
|
||||
},
|
||||
{
|
||||
'name': 'accept',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '接受上传的文件类型', 'en-US': 'File type to be uploaded' },
|
||||
'demoId': 'file-type'
|
||||
'demoId': 'fill-button-text'
|
||||
},
|
||||
{
|
||||
'name': 'upload-file-type',
|
||||
|
|
@ -248,80 +275,92 @@ export default {
|
|||
},
|
||||
'demoId': 'file-type'
|
||||
},
|
||||
{
|
||||
'name': 'max-upload-file-size',
|
||||
'type': 'number',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '最大上传文件大小', 'en-US': 'Maximum size of files to be uploaded' },
|
||||
'demoId': 'max-upload-file-size'
|
||||
},
|
||||
{
|
||||
'name': 'upload-name',
|
||||
'type': 'string',
|
||||
'defaultValue': '该属性的默认值为 file',
|
||||
'defaultValue': "'file'",
|
||||
'desc': { 'zh-CN': '上传的文件字段名', 'en-US': 'Field name of the uploaded file' },
|
||||
'demoId': 'upload-name'
|
||||
},
|
||||
{
|
||||
'name': 'upload-button-text',
|
||||
'type': 'string',
|
||||
'defaultValue': '该属性的默认值为 选择文件',
|
||||
'desc': {
|
||||
'zh-CN': '打开弹出框的按钮的文本配置属性',
|
||||
'en-US': 'Text configuration attribute of the button for opening a dialog box'
|
||||
},
|
||||
'demoId': 'fill-button-text4'
|
||||
'demoId': 'basic-usage'
|
||||
},
|
||||
{
|
||||
'name': 'with-credentials',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 false',
|
||||
'defaultValue': 'false',
|
||||
'desc': { 'zh-CN': '支持发送 cookie 凭证信息', 'en-US': 'Cookie credential information can be sent.' },
|
||||
'demoId': 'upload-name'
|
||||
},
|
||||
{
|
||||
'name': 'before-remove',
|
||||
'type': 'Function(arg1)',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '在上传文件列表点击删除成功前触发;arg1:{object 点击删除的文件信息}',
|
||||
'en-US':
|
||||
'This event is triggered before the upload file list is deleted successfully. arg1:{Information about the file to be deleted by clicking object}'
|
||||
},
|
||||
'demoId': 'prevent-delete-file'
|
||||
},
|
||||
{
|
||||
'name': 'before-upload',
|
||||
'type': 'Function(arg1)',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。;arg1:{object 上传的文件信息}',
|
||||
'en-US':
|
||||
'Hook before uploading a file. The parameter is the file to be uploaded. If false is returned or Promise is returned and rejected, the upload stops. ;arg1:{object uploaded file information}'
|
||||
},
|
||||
'demoId': 'before-upload'
|
||||
},
|
||||
{
|
||||
'name': 'http-request',
|
||||
'type': 'Function',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '覆盖默认的上传行为，可以自定义上传的实现',
|
||||
'en-US': 'Overwrite the default upload behavior. You can customize the upload implementation.'
|
||||
},
|
||||
'demoId': 'http-request'
|
||||
},
|
||||
{
|
||||
'name': 'data',
|
||||
'type': 'object',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '上传时附带的额外参数', 'en-US': 'Extra parameters attached during upload' },
|
||||
'demoId': 'data'
|
||||
'demoId': 'custom-request-headers'
|
||||
}
|
||||
],
|
||||
'events': [
|
||||
{
|
||||
'name': 'error',
|
||||
'type': '(file: IFile) => void',
|
||||
'typeAnchorName': 'file-upload#IFile',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '文件上传失败时触发的事件； file 为当前上传失败文件信息',
|
||||
'en-US': 'Event triggered when file upload fails; file is the current upload failure file information'
|
||||
},
|
||||
'demoId': 'upload-events'
|
||||
},
|
||||
{
|
||||
'name': 'exceed',
|
||||
'type': '(files: File | File[], fileList: IFile[]) => void',
|
||||
'typeAnchorName': 'file-upload#IFile',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '文件超出个数限制时触发的事件； files 为上传的文件',
|
||||
'en-US': 'Event triggered when the number of files exceeds the limit; Files are uploaded files'
|
||||
},
|
||||
'demoId': 'upload-events'
|
||||
},
|
||||
{
|
||||
'name': 'progress',
|
||||
'type': '(file: IFile) => void',
|
||||
'typeAnchorName': 'file-upload#IFile',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '文件上传时触发的事件',
|
||||
'en-US': 'Event triggered during file upload'
|
||||
},
|
||||
'demoId': 'upload-events'
|
||||
},
|
||||
{
|
||||
'name': 'remove',
|
||||
'type': '(file: IFile, fileList: IFile[]) => void',
|
||||
'typeAnchorName': 'file-upload#IFile',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '从文件列表移除文件时触发的事件； file 为当前移除的文件信息',
|
||||
'en-US':
|
||||
'Event triggered when removing a file from the file list; File is the information of the currently removed file'
|
||||
},
|
||||
'demoId': 'upload-events'
|
||||
},
|
||||
{
|
||||
'name': 'success',
|
||||
'type': '(res: ProgressEvent, file: IFile) => void',
|
||||
'typeAnchorName': 'IFile',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '文件上传成功时触发的事件； res 为上传成功后的响应信息事件对象，file 为当前上传的文件',
|
||||
'en-US':
|
||||
'Event triggered when the file is successfully uploaded; Res is the response information event object after successful upload'
|
||||
},
|
||||
'demoId': 'upload-events'
|
||||
}
|
||||
],
|
||||
'events': [],
|
||||
'slots': []
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'ICustomObject',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface ICustomObject {
|
||||
[propName: string]: any // 自定义属性
|
||||
}
|
||||
`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -139,8 +139,6 @@ export const closeErrorTips = (state) => () => (state.errorTips = [])
|
|||
|
||||
export const closeSuccessTips = (state) => () => (state.successTips = [])
|
||||
|
||||
export const watchFilters = (state) => (value) => (state.filters = value)
|
||||
|
||||
export const watchLimit = (state) => (value) => {
|
||||
state.limit = value
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,6 @@ import {
|
|||
closeErrorTips,
|
||||
watchUploaFileType,
|
||||
watchMaxUploadFileSize,
|
||||
watchFilters,
|
||||
watchAccept,
|
||||
computedUploadButtonText,
|
||||
computedUploadsButtonText,
|
||||
|
|
@ -80,7 +79,6 @@ const initState = ({ reactive, props, computed, api }) =>
|
|||
isShowDialog: false,
|
||||
accept: props.accept,
|
||||
action: props.action,
|
||||
filters: props.filters,
|
||||
headers: props.headers,
|
||||
disabled: props.disabled,
|
||||
multiple: props.multiple,
|
||||
|
|
@ -118,7 +116,6 @@ const initApi = ({ api, state, refs, emit, props, constants, t }) => {
|
|||
watchAccept: watchAccept(state),
|
||||
progressEvent: progressEvent(emit),
|
||||
watchHeaders: watchHeaders(state),
|
||||
watchFilters: watchFilters(state),
|
||||
watchMultiple: watchMultiple(state),
|
||||
watchDisabled: watchDisabled(state),
|
||||
closeErrorTips: closeErrorTips(state),
|
||||
|
|
@ -170,8 +167,6 @@ const initWatch = ({ watch, props, api }) => {
|
|||
|
||||
watch(() => props.headers, api.watchHeaders, { immediate: true })
|
||||
|
||||
watch(() => props.filters, api.watchFilters, { immediate: true })
|
||||
|
||||
watch(() => props.limit, api.watchLimit, { immediate: true })
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -70,10 +70,6 @@ export default defineComponent({
|
|||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
filters: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
accept: String,
|
||||
submitButtonText: {
|
||||
typee: String,
|
||||
|
|
|
|||
|
|
@ -66,7 +66,6 @@
|
|||
:with-credentials="state.withCredentials"
|
||||
:multiple="state.multiple"
|
||||
:accept="state.accept"
|
||||
:filters="state.filters"
|
||||
:limit="limit"
|
||||
:headers="state.headers"
|
||||
:action="state.action"
|
||||
|
|
@ -142,16 +141,15 @@ export default defineComponent({
|
|||
'cancelButtonText',
|
||||
'uploadFileType',
|
||||
'maxUploadFileSize',
|
||||
'filters',
|
||||
'accept',
|
||||
'disabled',
|
||||
'multiple',
|
||||
'limit',
|
||||
'headers',
|
||||
'helpIcon',
|
||||
'action',
|
||||
'fileList'
|
||||
],
|
||||
emits: ['remove', 'progress', 'error', 'exceed', 'success'],
|
||||
setup(props, context) {
|
||||
return setup({ props, context, renderless, api })
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue