From f5b0351814f79947d63abb2ead3f258dca87356a Mon Sep 17 00:00:00 2001 From: chenxi-20 <76168465+chenxi-20@users.noreply.github.com> Date: Fri, 22 Dec 2023 14:45:08 +0800 Subject: [PATCH] docs(file-upload): [file-upload] Optimize documents based on user needs (#1194) * docs(file-upload): [file-upload] Optimize documents based on user needs * docs(file-upload): [file-upload] Test problem optimization --- .../app/file-upload/custom-upload-tip.vue | 2 +- .../abort-quest-composition-api.vue | 2 +- .../demos/pc/app/file-upload/abort-quest.vue | 2 +- .../pc/app/file-upload/basic-usage.spec.ts | 4 +- ...> before-upload-limit-composition-api.vue} | 18 +- ...le.spec.ts => before-upload-limit.spec.ts} | 13 +- ...pload-file.vue => before-upload-limit.vue} | 20 +- .../custom-upload-tip-composition-api.vue | 2 +- .../app/file-upload/custom-upload-tip.spec.ts | 2 +- .../pc/app/file-upload/custom-upload-tip.vue | 2 +- .../form-validation-composition-api.vue | 14 +- .../pc/app/file-upload/form-validation.vue | 12 +- .../upload-events-composition-api.vue | 16 +- .../pc/app/file-upload/upload-events.vue | 16 +- .../upload-limit-composition-api.vue | 22 -- .../pc/app/file-upload/upload-limit.spec.ts | 20 -- .../demos/pc/app/file-upload/upload-limit.vue | 32 --- .../upload-request-composition-api.vue | 2 +- .../pc/app/file-upload/upload-request.vue | 2 +- .../pc/app/file-upload/webdoc/file-upload.js | 199 +++++++++--------- .../pc/app/pop-upload/webdoc/pop-upload.js | 2 +- .../__tests__/file-upload.test.tsx | 5 +- 22 files changed, 185 insertions(+), 224 deletions(-) rename examples/sites/demos/pc/app/file-upload/{prevent-upload-file-composition-api.vue => before-upload-limit-composition-api.vue} (55%) rename examples/sites/demos/pc/app/file-upload/{prevent-upload-file.spec.ts => before-upload-limit.spec.ts} (64%) rename examples/sites/demos/pc/app/file-upload/{prevent-upload-file.vue => before-upload-limit.vue} (57%) delete mode 100644 examples/sites/demos/pc/app/file-upload/upload-limit-composition-api.vue delete mode 100644 examples/sites/demos/pc/app/file-upload/upload-limit.spec.ts delete mode 100644 examples/sites/demos/pc/app/file-upload/upload-limit.vue diff --git a/examples/sites/demos/mobile/app/file-upload/custom-upload-tip.vue b/examples/sites/demos/mobile/app/file-upload/custom-upload-tip.vue index f9735128f..a6ac5b7f5 100644 --- a/examples/sites/demos/mobile/app/file-upload/custom-upload-tip.vue +++ b/examples/sites/demos/mobile/app/file-upload/custom-upload-tip.vue @@ -3,7 +3,7 @@ - + diff --git a/examples/sites/demos/pc/app/file-upload/abort-quest-composition-api.vue b/examples/sites/demos/pc/app/file-upload/abort-quest-composition-api.vue index a12682d18..4467442e5 100644 --- a/examples/sites/demos/pc/app/file-upload/abort-quest-composition-api.vue +++ b/examples/sites/demos/pc/app/file-upload/abort-quest-composition-api.vue @@ -16,7 +16,7 @@ const action = ref('http://localhost:3000/api/upload') const uploadRef = ref() function cancelUpload() { - Modal.message('手动取消上传') + Modal.message({ message: '手动取消上传', status: 'info' }) uploadRef.value.abort() } diff --git a/examples/sites/demos/pc/app/file-upload/abort-quest.vue b/examples/sites/demos/pc/app/file-upload/abort-quest.vue index 0a137bd65..6b4ec2cc6 100644 --- a/examples/sites/demos/pc/app/file-upload/abort-quest.vue +++ b/examples/sites/demos/pc/app/file-upload/abort-quest.vue @@ -23,7 +23,7 @@ export default { }, methods: { cancelUpload() { - Modal.message('手动取消上传') + Modal.message({ message: '手动取消上传', status: 'info' }) this.$refs.upload.abort() } } diff --git a/examples/sites/demos/pc/app/file-upload/basic-usage.spec.ts b/examples/sites/demos/pc/app/file-upload/basic-usage.spec.ts index e4f37d088..bda953eea 100644 --- a/examples/sites/demos/pc/app/file-upload/basic-usage.spec.ts +++ b/examples/sites/demos/pc/app/file-upload/basic-usage.spec.ts @@ -5,13 +5,13 @@ test('基本用法', async ({ page }) => { await page.goto('file-upload#basic-usage') const upload = page.getByRole('button', { name: '点击上传' }) - const lists = page.locator('.tiny-upload-list__item') + const lists = page.locator('.tiny-upload-list__li') const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()]) const path = require('node:path') const currentPath = path.resolve(__dirname, '测试.jpg') await fileChooser.setFiles(currentPath) - await expect(lists).toHaveCount(1) + await page.getByText('测试.jpg').isVisible() await expect(lists).toHaveText('测试.jpg按 delete 键可删除') }) diff --git a/examples/sites/demos/pc/app/file-upload/prevent-upload-file-composition-api.vue b/examples/sites/demos/pc/app/file-upload/before-upload-limit-composition-api.vue similarity index 55% rename from examples/sites/demos/pc/app/file-upload/prevent-upload-file-composition-api.vue rename to examples/sites/demos/pc/app/file-upload/before-upload-limit-composition-api.vue index 24fd7f78a..8b2707d4b 100644 --- a/examples/sites/demos/pc/app/file-upload/prevent-upload-file-composition-api.vue +++ b/examples/sites/demos/pc/app/file-upload/before-upload-limit-composition-api.vue @@ -1,5 +1,5 @@ diff --git a/examples/sites/demos/pc/app/file-upload/custom-upload-tip.spec.ts b/examples/sites/demos/pc/app/file-upload/custom-upload-tip.spec.ts index bbac65002..c14092aa4 100644 --- a/examples/sites/demos/pc/app/file-upload/custom-upload-tip.spec.ts +++ b/examples/sites/demos/pc/app/file-upload/custom-upload-tip.spec.ts @@ -6,5 +6,5 @@ test('自定义上传提示', async ({ page }) => { const tip = page.locator('.tiny-upload__tip') - await expect(tip).toHaveText('只能上传jpg/png文件，且不超过500kb') + await expect(tip).toHaveText('只能上传 jpg/png 文件，且不超过500 kb') }) diff --git a/examples/sites/demos/pc/app/file-upload/custom-upload-tip.vue b/examples/sites/demos/pc/app/file-upload/custom-upload-tip.vue index aeb4bb073..28aa565bd 100644 --- a/examples/sites/demos/pc/app/file-upload/custom-upload-tip.vue +++ b/examples/sites/demos/pc/app/file-upload/custom-upload-tip.vue @@ -4,7 +4,7 @@ 选取文件 diff --git a/examples/sites/demos/pc/app/file-upload/form-validation-composition-api.vue b/examples/sites/demos/pc/app/file-upload/form-validation-composition-api.vue index 14dbb6506..91b650dad 100644 --- a/examples/sites/demos/pc/app/file-upload/form-validation-composition-api.vue +++ b/examples/sites/demos/pc/app/file-upload/form-validation-composition-api.vue @@ -20,7 +20,7 @@ 选取文件 @@ -65,6 +65,9 @@ const rules = reactive({ const uploadSuccess = () => { // 模拟上传成功后，返回的数据信息,以此通过validatePass的校验 createData.files = `https://res.hc-cdn.com/tiny-vue-web-doc/3.10.5.20230903162611/static/images/book.jpg` + + // 上传成功后再进行表单验证 + formValidate() } const beforeUpload = (file) => { @@ -72,21 +75,24 @@ const beforeUpload = (file) => { uploadSuccess() } -const handleSubmit = () => { +const formValidate = () => { ruleFormRef.value.validate((valid) => { if (valid) { Modal.alert('校验通过') } else { - Modal.message({ message: '校验不通过！！', status: 'warning' }) + Modal.message({ message: '校验不通过', status: 'warning' }) return false } }) } +const handleSubmit = () => { + formValidate() +} + const handleRemove = (file) => { const index = fileList.findIndex((item) => item.name === file.name) fileList.splice(index, 1) - console.log('fileList', fileList) createData.files = '' } diff --git a/examples/sites/demos/pc/app/file-upload/form-validation.vue b/examples/sites/demos/pc/app/file-upload/form-validation.vue index 61f2cf999..3274e39bb 100644 --- a/examples/sites/demos/pc/app/file-upload/form-validation.vue +++ b/examples/sites/demos/pc/app/file-upload/form-validation.vue @@ -21,7 +21,7 @@ 选取文件 @@ -67,21 +67,27 @@ export default { uploadSuccess() { // 模拟上传成功后，返回的数据信息,以此通过validatePass的校验 this.createData.files = `https://res.hc-cdn.com/tiny-vue-web-doc/3.10.5.20230903162611/static/images/book.jpg` + + // 上传成功后再进行表单验证 + this.formValidate() }, beforeUpload(file) { this.fileList.push({ name: file.name, url: file.url }) this.uploadSuccess() }, - handleSubmit() { + formValidate() { this.$refs.ruleFormRef.validate((valid) => { if (valid) { Modal.alert('校验通过') } else { - Modal.message({ message: '校验不通过！！', status: 'warning' }) + Modal.message({ message: '校验不通过', status: 'warning' }) return false } }) }, + handleSubmit() { + this.formValidate() + }, handleRemove(file) { const index = this.fileList.findIndex((item) => item.name === file.name) this.fileList.splice(index, 1) diff --git a/examples/sites/demos/pc/app/file-upload/upload-events-composition-api.vue b/examples/sites/demos/pc/app/file-upload/upload-events-composition-api.vue index 613c083fa..f003d4c12 100644 --- a/examples/sites/demos/pc/app/file-upload/upload-events-composition-api.vue +++ b/examples/sites/demos/pc/app/file-upload/upload-events-composition-api.vue @@ -36,34 +36,34 @@ const fileList = ref([ ]) function handleRemove() { - Modal.message('触发删除文件回调事件') + Modal.message({ message: '触发删除文件回调事件', status: 'info' }) } function handlePreview(file) { - Modal.message(file.url) + Modal.message({ message: file.url, status: 'info' }) } function progressEvent() { - Modal.message('文件上传时的回调 返回进程') + Modal.message({ message: '文件上传时的回调 返回进程', status: 'loading' }) } function errorEvent() { - Modal.message('文件上传失败回调') + Modal.message({ message: '文件上传失败回调', status: 'error' }) } function handleExceed() { - Modal.message('触发文件超出个数限制回调事件') + Modal.message({ message: '触发文件超出个数限制回调事件', status: 'warning' }) } function handleAvatarSuccess() { - Modal.message('触发上传文件成功回调事件') + Modal.message({ message: '触发上传文件成功回调事件', status: 'success' }) } function handleChange() { - Modal.message('触发上传文件改变回调事件') + Modal.message({ message: '触发上传文件改变回调事件', status: 'info' }) } function handleHashProgress() { - Modal.message('文件上传生成hash值时的回调 返回进程') + Modal.message({ message: '文件上传生成hash值时的回调 返回进程', status: 'info' }) } diff --git a/examples/sites/demos/pc/app/file-upload/upload-events.vue b/examples/sites/demos/pc/app/file-upload/upload-events.vue index 86ddb51bb..a548d907f 100644 --- a/examples/sites/demos/pc/app/file-upload/upload-events.vue +++ b/examples/sites/demos/pc/app/file-upload/upload-events.vue @@ -44,28 +44,28 @@ export default { }, methods: { handleRemove() { - Modal.message('触发删除文件回调事件') + Modal.message({ message: '触发删除文件回调事件', status: 'info' }) }, handlePreview(file) { - Modal.message(file.url) + Modal.message({ message: file.url, status: 'info' }) }, progressEvent() { - Modal.message('文件上传时的回调 返回进程') + Modal.message({ message: '文件上传时的回调 返回进程', status: 'loading' }) }, errorEvent() { - Modal.message('文件上传失败回调') + Modal.message({ message: '文件上传失败回调', status: 'error' }) }, handleExceed() { - Modal.message('触发文件超出个数限制回调事件') + Modal.message({ message: '触发文件超出个数限制回调事件', status: 'warning' }) }, handleAvatarSuccess() { - Modal.message('触发上传文件成功回调事件') + Modal.message({ message: '触发上传文件成功回调事件', status: 'success' }) }, handleChange() { - Modal.message('触发上传文件改变回调事件') + Modal.message({ message: '触发上传文件改变回调事件', status: 'info' }) }, handleHashProgress() { - Modal.message('文件上传生成hash值时的回调 返回进程') + Modal.message({ message: '文件上传生成hash值时的回调 返回进程', status: 'info' }) } } } diff --git a/examples/sites/demos/pc/app/file-upload/upload-limit-composition-api.vue b/examples/sites/demos/pc/app/file-upload/upload-limit-composition-api.vue deleted file mode 100644 index 296050ff2..000000000 --- a/examples/sites/demos/pc/app/file-upload/upload-limit-composition-api.vue +++ /dev/null @@ -1,22 +0,0 @@ - - - diff --git a/examples/sites/demos/pc/app/file-upload/upload-limit.spec.ts b/examples/sites/demos/pc/app/file-upload/upload-limit.spec.ts deleted file mode 100644 index 2ff9f3223..000000000 --- a/examples/sites/demos/pc/app/file-upload/upload-limit.spec.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { test, expect } from '@playwright/test' - -test('上传前限制', async ({ page }) => { - page.on('pageerror', (exception) => expect(exception).toBeNull()) - await page.goto('file-upload#upload-limit') - - const upload = page.getByRole('button', { name: '点击上传' }) - const lists = page.locator('.tiny-upload-list__item') - const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()]) - - const path = require('node:path') - const path1 = path.resolve(__dirname, '测试.jpg') - const path2 = path.resolve(__dirname, '测试.svg') - const path3 = path.resolve(__dirname, '测试.png') - - fileChooser.setFiles(path1) - fileChooser.setFiles(path2) - fileChooser.setFiles(path3) - await expect(lists).toHaveCount(0) -}) diff --git a/examples/sites/demos/pc/app/file-upload/upload-limit.vue b/examples/sites/demos/pc/app/file-upload/upload-limit.vue deleted file mode 100644 index f0ed679ed..000000000 --- a/examples/sites/demos/pc/app/file-upload/upload-limit.vue +++ /dev/null @@ -1,32 +0,0 @@ - - - diff --git a/examples/sites/demos/pc/app/file-upload/upload-request-composition-api.vue b/examples/sites/demos/pc/app/file-upload/upload-request-composition-api.vue index d23860d57..08ea63153 100644 --- a/examples/sites/demos/pc/app/file-upload/upload-request-composition-api.vue +++ b/examples/sites/demos/pc/app/file-upload/upload-request-composition-api.vue @@ -30,7 +30,7 @@ const headers = ref({ }) function beforeUpload() { - Modal.message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求') + Modal.message({ message: '查看请求头示例请打开浏览器开发者工具 network 的 upload 请求', status: 'info' }) return true } diff --git a/examples/sites/demos/pc/app/file-upload/upload-request.vue b/examples/sites/demos/pc/app/file-upload/upload-request.vue index 3e364a0bf..c859c4ef4 100644 --- a/examples/sites/demos/pc/app/file-upload/upload-request.vue +++ b/examples/sites/demos/pc/app/file-upload/upload-request.vue @@ -38,7 +38,7 @@ export default { }, methods: { beforeUpload() { - Modal.message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求') + Modal.message({ message: '查看请求头示例请打开浏览器开发者工具 network 的 upload 请求', status: 'info' }) return true } diff --git a/examples/sites/demos/pc/app/file-upload/webdoc/file-upload.js b/examples/sites/demos/pc/app/file-upload/webdoc/file-upload.js index 4a6ab16f2..886c70fe1 100644 --- a/examples/sites/demos/pc/app/file-upload/webdoc/file-upload.js +++ b/examples/sites/demos/pc/app/file-upload/webdoc/file-upload.js @@ -12,16 +12,6 @@ export default { }, 'codeFiles': ['basic-usage.vue'] }, - { - 'demoId': 'custom-trigger', - 'name': { 'zh-CN': '触发源插槽', 'en-US': 'Trigger source slot' }, - 'desc': { - 'zh-CN': '通过 trigger 插槽自定义文件选择触发源的内容，有触发文件选项框弹出的功能。', - 'en-US': - 'Select the content of the trigger source through the trigger slot customization file, and there is a function to pop up the trigger file option box.' - }, - 'codeFiles': ['custom-trigger.vue'] - }, { 'demoId': 'disabled', 'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' }, @@ -31,15 +21,6 @@ export default { }, 'codeFiles': ['disabled.vue'] }, - { - 'demoId': 'accept-file-image', - 'name': { 'zh-CN': '限制文件类型', 'en-US': 'Restrict file types' }, - 'desc': { - 'zh-CN': '通过 accept 设置限制上传文件的格式。', - 'en-US': 'Limit the format of uploaded files by setting accept .' - }, - 'codeFiles': ['accept-file-image.vue'] - }, { 'demoId': 'multiple-file', 'name': { 'zh-CN': '文件多选', 'en-US': 'Multiple file selection' }, @@ -60,25 +41,35 @@ export default { 'codeFiles': ['manual-upload.vue'] }, { - 'demoId': 'upload-file-list', - 'name': { 'zh-CN': '文件列表', 'en-US': 'Uploaded file list' }, + 'demoId': 'accept-file-image', + 'name': { 'zh-CN': '限制文件类型', 'en-US': 'Restrict file types' }, 'desc': { - 'zh-CN': - '通过 file-list 设置上传的文件列表，也可通过 :show-file-list="false" 关闭列表的显示； open-download-file 设置文件是否可下载。', - 'en-US': - 'Set the list of uploaded files through file-list , or turn off the display of the list through : show-file-list="false" ; open-download-file Set whether the file is downloadable.' + 'zh-CN': '通过 accept 设置限制上传文件的格式。', + 'en-US': 'Limit the format of uploaded files by setting accept .' }, - 'codeFiles': ['upload-file-list.vue'] + 'codeFiles': ['accept-file-image.vue'] }, { - 'demoId': 'upload-file-list-slot', - 'name': { 'zh-CN': '定义文件列表', 'en-US': 'Custom file list' }, + 'demoId': 'max-file-count', + 'name': { 'zh-CN': '最大上传数', 'en-US': 'Maximum number of uploads' }, 'desc': { - 'zh-CN': '通过 name 设置上传的文件字段名， file 插槽自定义文件列表。', + 'zh-CN': + '通过 limit 设置限制上传文件的个数， is-hidden 设置达到最大上传数时是否隐藏上传按钮。', 'en-US': - 'Set the field name of the uploaded file through name , and customize the file list for the file slot.' + 'Set a limit on the number of uploaded files by limit , and is-hidden whether to hide the upload button when the maximum number of uploads is reached.' }, - 'codeFiles': ['upload-file-list-slot.vue'] + 'codeFiles': ['max-file-count.vue'] + }, + { + 'demoId': 'before-upload-limit', + 'name': { 'zh-CN': '自定义上传前限制', 'en-US': 'Custom pre upload restrictions' }, + 'desc': { + 'zh-CN': + '通过 before-upload 执行上传文件前的操作，对文件类型和大小做限制，返回 false 或 reject 则阻止上传。', + 'en-US': + 'Usebefore-uploadto perform the operation before uploading a file, and limit the file type and size , and return false or reject to block the upload.' + }, + 'codeFiles': ['before-upload-limit.vue'] }, { 'demoId': 'prevent-delete-file', @@ -91,20 +82,9 @@ export default { }, 'codeFiles': ['prevent-delete-file.vue'] }, - { - 'demoId': 'prevent-upload-file', - 'name': { 'zh-CN': '阻止上传文件', 'en-US': 'Prevent upload files' }, - 'desc': { - 'zh-CN': - '通过 before-upload 执行上传文件前的操作，返回 false 或 reject 则阻止上传。', - 'en-US': - 'Perform the operation before uploading the file by before-upload , and return false or reject to block the upload.' - }, - 'codeFiles': ['prevent-upload-file.vue'] - }, { 'demoId': 'upload-request', - 'name': { 'zh-CN': '请求头部配置', 'en-US': 'Request header configuration' }, + 'name': { 'zh-CN': '定义请求头部', 'en-US': 'Custom request header' }, 'desc': { 'zh-CN': '通过 headers 配置上传请求头部信息， with-credentials 设置允许发送 cookie 凭证信息。', @@ -157,24 +137,25 @@ export default { 'codeFiles': ['http-request.vue'] }, { - 'demoId': 'upload-limit', - 'name': { 'zh-CN': '上传前限制', 'en-US': 'Custom upload restrictions' }, - 'desc': { - 'zh-CN': '通过 before-upload 设置上传前事件回调，对文件类型和大小做限制。', - 'en-US': 'Set pre upload event callbacks through before-upload to limit file types and sizes.' - }, - 'codeFiles': ['upload-limit.vue'] - }, - { - 'demoId': 'max-file-count', - 'name': { 'zh-CN': '最大上传数', 'en-US': 'Maximum number of uploads' }, + 'demoId': 'upload-file-list', + 'name': { 'zh-CN': '文件列表', 'en-US': 'Uploaded file list' }, 'desc': { 'zh-CN': - '通过 limit 设置限制上传文件的个数， is-hidden 设置达到最大上传数时是否隐藏上传按钮。', + '通过 file-list 设置上传的文件列表，也可通过 :show-file-list="false" 关闭列表的显示； open-download-file 设置文件是否可下载。', 'en-US': - 'Set a limit on the number of uploaded files by limit , and is-hidden whether to hide the upload button when the maximum number of uploads is reached.' + 'Set the list of uploaded files through file-list , or turn off the display of the list through : show-file-list="false" ; open-download-file Set whether the file is downloadable.' }, - 'codeFiles': ['max-file-count.vue'] + 'codeFiles': ['upload-file-list.vue'] + }, + { + 'demoId': 'upload-file-list-slot', + 'name': { 'zh-CN': '定义文件列表', 'en-US': 'Custom file list' }, + 'desc': { + 'zh-CN': '通过 name 设置上传的文件字段名， file 插槽自定义文件列表。', + 'en-US': + 'Set the field name of the uploaded file through name , and customize the file list for the file slot.' + }, + 'codeFiles': ['upload-file-list-slot.vue'] }, { 'demoId': 'picture-card', @@ -189,7 +170,7 @@ export default { }, { 'demoId': 'file-picture-card', - 'name': { 'zh-CN': '照片墙的预览、下载、删除', 'en-US': 'Preview, download, and delete photo walls' }, + 'name': { 'zh-CN': '定义照片墙列表', 'en-US': 'Custom photo wall list' }, 'desc': { 'zh-CN': '通过 downloadFile 实例方法实现下载功能， handleRemove 实例方法实现删除功能。', @@ -208,19 +189,6 @@ export default { }, 'codeFiles': ['picture-list.vue'] }, - { - 'demoId': 'upload-events', - 'name': { 'zh-CN': '事件', 'en-US': 'Event' }, - 'desc': { - 'zh-CN': `
preview 监听文件点击事件；
remove 监听文件移除事件；
error 监听文件上传失败事件；
- exceed 监听文件超出个数限制事件；
progress 监听文件上传过程事件；
change 监听文件改变事件（文件改变涵盖文件添加、上传成功和上传失败）；
- success 监听文件上传成功事件；
hash-progress 监听文件上传生成hash值事件。
`, - 'en-US': `
preview Listen for file click events;
remove Listen for file removal events;
error Listen for file upload failure events;
- exceeded Listen for events where the number of files exceeds the limit;
progress Listen for file upload process events;
change Listen for file change events (file changes include file addition, successful upload, and failed upload);
- success Listen for file upload success events;
hash-progress Listen for file upload to generate hash value events.
` - }, - 'codeFiles': ['upload-events.vue'] - }, { 'demoId': 'clear-files', 'name': { 'zh-CN': '手动清空列表', 'en-US': 'Manually clear the list' }, @@ -241,17 +209,6 @@ export default { }, 'codeFiles': ['abort-quest.vue'] }, - { - 'demoId': 'custom-upload-tip', - 'name': { 'zh-CN': '定义上传提示', 'en-US': 'Customized Upload Prompt' }, - 'desc': { - 'zh-CN': - '通过 tip 插槽自定义上传提示， re-uploadable 启用重新上传功能， re-upload-tip 自定义重新上传提示的左侧文字。', - 'en-US': - 'Customize the upload prompt through the tip slot, re-uploadable enable the re upload function, and re-upload-tip customize the left text of the re upload prompt.' - }, - 'codeFiles': ['custom-upload-tip.vue'] - }, { 'demoId': 'form-validation', 'name': { 'zh-CN': '表单校验', 'en-US': 'Form verification' }, @@ -272,13 +229,47 @@ export default { }, { 'demoId': 'image-size', - 'name': { 'zh-CN': '获取图片的原始尺寸', 'en-US': 'Obtain the original size of the image' }, + 'name': { 'zh-CN': '获取图片原始尺寸', 'en-US': 'Obtain the original size of the image' }, 'desc': { 'zh-CN': '通过 FileReader.readAsDataURL() 读取文件中的内容，获取图片的原始尺寸。', 'en-US': 'Read the content of the file through FileReader. readAsDataURL() to obtain the original size of the image.' }, 'codeFiles': ['image-size.vue'] + }, + { + 'demoId': 'custom-trigger', + 'name': { 'zh-CN': '触发源插槽', 'en-US': 'Trigger source slot' }, + 'desc': { + 'zh-CN': '通过 trigger 插槽自定义文件选择触发源的内容，有触发文件选项框弹出的功能。', + 'en-US': + 'Select the content of the trigger source through the trigger slot customization file, and there is a function to pop up the trigger file option box.' + }, + 'codeFiles': ['custom-trigger.vue'] + }, + { + 'demoId': 'custom-upload-tip', + 'name': { 'zh-CN': '定义上传提示', 'en-US': 'Customized Upload Prompt' }, + 'desc': { + 'zh-CN': + '通过 tip 插槽自定义上传提示， re-uploadable 启用重新上传功能， re-upload-tip 自定义重新上传提示的左侧文字。', + 'en-US': + 'Customize the upload prompt through the tip slot, re-uploadable enable the re upload function, and re-upload-tip customize the left text of the re upload prompt.' + }, + 'codeFiles': ['custom-upload-tip.vue'] + }, + { + 'demoId': 'upload-events', + 'name': { 'zh-CN': '事件', 'en-US': 'Event' }, + 'desc': { + 'zh-CN': `
preview 监听文件点击事件；
remove 监听文件移除事件；
error 监听文件上传失败事件；
+ exceed 监听文件超出个数限制事件；
progress 监听文件上传过程事件；
change 监听文件改变事件（文件改变涵盖文件添加、上传成功和上传失败）；
+ success 监听文件上传成功事件；
hash-progress 监听文件上传生成hash值事件。
`, + 'en-US': `
preview Listen for file click events;
remove Listen for file removal events;
error Listen for file upload failure events;
+ exceeded Listen for events where the number of files exceeds the limit;
progress Listen for file upload process events;
change Listen for file change events (file changes include file addition, successful upload, and failed upload);
+ success Listen for file upload success events;
hash-progress Listen for file upload to generate hash value events.
` + }, + 'codeFiles': ['upload-events.vue'] } ], apis: [ @@ -339,11 +330,12 @@ export default { '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' }, - 'demoId': 'prevent-upload-file' + 'demoId': 'before-upload-limit' }, { 'name': 'data', - 'type': 'object', + 'type': 'IData', + 'typeAnchorName': 'IData', 'defaultValue': '', 'desc': { 'zh-CN': '上传时附带的额外参数，参数自定义', @@ -443,7 +435,7 @@ export default { 'type': 'boolean', 'defaultValue': 'false', 'desc': { - 'zh-CN': '配置 merge-service 为true 且开启多文件上传走默认服务会将多个上传服务合并为一个服务上传', + 'zh-CN': '配置 merge-service 为 true 且开启多文件上传走默认服务会将多个上传服务合并为一个服务上传', 'en-US': 'If merge-service is set to true and multiple files are uploaded using the default service, multiple upload services are combined into one service' }, @@ -498,9 +490,9 @@ export default { 'type': '(count: number) => string', 'defaultValue': '', 'desc': { - 'zh-CN': '自定义重新上传的左侧提示文字，需要与re-uploadable搭配使用【3.12.0版本新增】', + 'zh-CN': '自定义重新上传的左侧提示文字，需要与 re-uploadable 搭配使用【3.12.0版本新增】', 'en-US': - 'Customize the left prompt for re uploading, which needs to be used in conjunction with re uploadable [added in version 3.12.0]' + 'Customize the left prompt for re uploading, which needs to be used in conjunction with re-uploadable [added in version 3.12.0]' }, 'demoId': 'custom-upload-tip' }, @@ -562,7 +554,7 @@ export default { 'defaultValue': '', 'desc': { 'zh-CN': - '文件上传失败时触发的事件； message 为错误信息事件对象，file 为当前上传失败文件信息，fileList为上传成功file数组', + '文件上传失败时触发的事件； message 为错误信息事件对象，file 为当前上传失败文件信息，fileList 为上传成功 file 数组', 'en-US': 'Event triggered when file upload fails; Message is the error message event object, file is the current upload failure file information, and fileList is the upload success file array' }, @@ -584,7 +576,7 @@ export default { 'type': '(percentage: number) => void', 'defaultValue': '', 'desc': { - 'zh-CN': '文件上传生成hash值触发的事件； percentage为生成的进度值', + 'zh-CN': '文件上传生成 hash 值触发的事件； percentage 为生成的进度值', 'en-US': 'Event triggered by file upload to generate hash value; percentage is the generated progress value' }, 'demoId': 'upload-events' @@ -690,17 +682,11 @@ export default { ], types: [ { - name: 'IThumbOption', + name: 'IData', type: 'interface', code: ` -interface IThumbOption { - width: number // 弹窗宽度，默认270 - showDownload: boolean // 是否显示下载按钮，默认false - showDel: boolean // 是否显示删除按钮，布尔false - showTooltip: boolean // 文件名超出隐藏显示时是否启用tip，默认false - popperClass: string // 弹窗列表自定义类名 - downloadFile: (file) => void // 点击下载按钮执行函数 - icon: string | VueComponent // 列表结果前 icon ，默认为 'icon-attachment' +interface IData { + [propsName?: any]: any // 上传参数可自定义 } ` }, @@ -745,6 +731,21 @@ interface IHeaders { code: ` type IListType = 'text' | 'picture' | 'picture-card' | 'thumb' ` + }, + { + name: 'IThumbOption', + type: 'interface', + code: ` +interface IThumbOption { + width: number // 弹窗宽度，默认270 + showDownload: boolean // 是否显示下载按钮，默认false + showDel: boolean // 是否显示删除按钮，布尔false + showTooltip: boolean // 文件名超出隐藏显示时是否启用tip，默认false + popperClass: string // 弹窗列表自定义类名 + downloadFile: (file) => void // 点击下载按钮执行函数 + icon: string | VueComponent // 列表结果前 icon ，默认为 'icon-attachment' +} + ` } ] } diff --git a/examples/sites/demos/pc/app/pop-upload/webdoc/pop-upload.js b/examples/sites/demos/pc/app/pop-upload/webdoc/pop-upload.js index b887aa61d..873a9f312 100644 --- a/examples/sites/demos/pc/app/pop-upload/webdoc/pop-upload.js +++ b/examples/sites/demos/pc/app/pop-upload/webdoc/pop-upload.js @@ -14,7 +14,7 @@ export default { }, { 'demoId': 'custom-request-headers', - 'name': { 'zh-CN': '请求头部配置', 'en-US': 'Request header configuration' }, + 'name': { 'zh-CN': '定义请求头部', 'en-US': 'Custom request header' }, 'desc': { 'zh-CN': '通过 with-credentials 开启支持发送 cookie 凭证信息，headers 自定义上传请求头信息。', diff --git a/packages/vue/src/file-upload/__tests__/file-upload.test.tsx b/packages/vue/src/file-upload/__tests__/file-upload.test.tsx index 16cb81860..fe1c27955 100644 --- a/packages/vue/src/file-upload/__tests__/file-upload.test.tsx +++ b/packages/vue/src/file-upload/__tests__/file-upload.test.tsx @@ -19,9 +19,8 @@ describe('PC Mode', () => { action={action} auto-upload={false} v-slots={{ - tip: () =>
只能上传jpg/png文件，且不超过500kb
- }} - > + tip: () =>
只能上传 jpg/png 文件，且不超过500 kb
+ }}> )) expect(wrapper.find('.tiny-upload__tip').exists()).toBe(true) })