From d1f767dd0804da4fa2d1f0c429f591a6c01d4cf7 Mon Sep 17 00:00:00 2001 From: wegi8 <18272190626@163.com> Date: Sat, 12 Mar 2022 18:41:42 +0800 Subject: [PATCH 1/2] feat(ui/uploader): add a new feature in the ui/uploader scope --- .gitignore | 1 + packages/varlet-ui/src/uploader/Uploader.vue | 9 +++- packages/varlet-ui/src/uploader/docs/en-US.md | 21 ++++++++ packages/varlet-ui/src/uploader/docs/zh-CN.md | 20 ++++++++ .../varlet-ui/src/uploader/example/index.vue | 50 +++++++++++++++++-- .../src/uploader/example/locale/en-US.ts | 1 + .../src/uploader/example/locale/zh-CN.ts | 1 + packages/varlet-ui/src/uploader/props.ts | 4 ++ scripts/bootstrap.mjs | 6 +-- 9 files changed, 103 insertions(+), 10 deletions(-) diff --git a/.gitignore b/.gitignore index 06f4b2aac84..eb8e8bbb9b5 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ node_modules .varlet .idea .vscode +.history *.log .DS_Store *.vsix diff --git a/packages/varlet-ui/src/uploader/Uploader.vue b/packages/varlet-ui/src/uploader/Uploader.vue index 6b7593da954..e17e2482d29 100644 --- a/packages/varlet-ui/src/uploader/Uploader.vue +++ b/packages/varlet-ui/src/uploader/Uploader.vue @@ -5,7 +5,7 @@ class="var-uploader__file var-elevation--2" :class="[f.state === 'loading' ? 'var-uploader--loading' : null]" :key="f.id" - v-for="f in modelValue" + v-for="f in renderFileList" v-ripple="{ disabled: disabled || formDisabled || readonly || formReadonly || !ripple }" @click="preview(f)" > @@ -136,6 +136,12 @@ export default defineComponent({ resetValidation, } = useValidation() + const renderFileList = computed(() => { + const { modelValue, hideList } = props + if (hideList) return [] + return modelValue + }) + const preview = (varFile: VarFile) => { const { disabled, readonly, previewed } = props @@ -315,6 +321,7 @@ export default defineComponent({ ) return { + renderFileList, showPreview, currentPreview, errorMessage, diff --git a/packages/varlet-ui/src/uploader/docs/en-US.md b/packages/varlet-ui/src/uploader/docs/en-US.md index af9aab3eb13..932bf11d697 100644 --- a/packages/varlet-ui/src/uploader/docs/en-US.md +++ b/packages/varlet-ui/src/uploader/docs/en-US.md @@ -253,6 +253,26 @@ The second argument is a collection of utility functions that can quickly get a /> ``` +### Custom render file list + +You can use the `hide-list` to hiddeing component files list, then you can render this list by custom. +This invalidates the `preview`,and you can use `ImagePreview` to achieve the same function + +```html +
+
+ +
+ + 上传 + +
+``` + ## API ### Props @@ -270,6 +290,7 @@ The second argument is a collection of utility functions that can quickly get a | `maxsize` | Maximum file size | _string \| number_ | `-` | | `previewed` | Whether to allow preview | _boolean_ | `true` | | `ripple` | Whether to open ripple | _boolean_ | `true` | +| `hide-list` | Whether to hide the file list | _boolean_ | `false` | | `validate-trigger` | Timing to trigger validation， The optional value is `onChange` `onRemove` | _ValidateTriggers[]_ | `['onChange', 'onRemove']` | | `rules` | The validation rules，Returns `true` to indicate that the validation passed，The remaining values are converted to text as user prompts | _Array<(v: VarFile, u: VarFileUtils) => any>_ | `-` | diff --git a/packages/varlet-ui/src/uploader/docs/zh-CN.md b/packages/varlet-ui/src/uploader/docs/zh-CN.md index c6b2f54aede..beb9be5f09b 100644 --- a/packages/varlet-ui/src/uploader/docs/zh-CN.md +++ b/packages/varlet-ui/src/uploader/docs/zh-CN.md @@ -250,6 +250,25 @@ export default { /> ``` +### 自定义渲染 + +通过`hide-list`隐藏组件的文件列表，并且自己渲染，但这会失去preview，需要配合`ImagePreview`自己实现 + +```html +
+
+ +
+ + 上传 + +
+``` + ## API ### 属性 @@ -267,6 +286,7 @@ export default { | `maxsize` | 最大文件大小 | _string \| number_ | `-` | | `previewed` | 是否允许预览 | _boolean_ | `true` | | `ripple` | 是否开启水波纹 | _boolean_ | `true` | +| `hide-list` | 是否隐藏文件列表 | _boolean_ | `false` | | `validate-trigger` | 触发验证的时机， 可选值为 `onChange` `onRemove` | _ValidateTriggers[]_ | `['onChange', 'onRemove']` | | `rules` | 验证规则，返回 `true` 表示验证通过，其余的值则转换为文本作为用户提示 | _Array<(v: VarFile, u: VarFileUtils) => any>_ | `-` | diff --git a/packages/varlet-ui/src/uploader/example/index.vue b/packages/varlet-ui/src/uploader/example/index.vue index 9811d10cf54..ffae4749439 100644 --- a/packages/varlet-ui/src/uploader/example/index.vue +++ b/packages/varlet-ui/src/uploader/example/index.vue @@ -34,6 +34,22 @@ {{ pack.validate }} + {{ pack.customRender }} +
+
+ +
+ + {{ pack.upload }} + +
+
@@ -104,6 +120,23 @@ export default { cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg', }, ], + files12: [ + { + url: 'https://varlet.gitee.io/varlet-ui/cat.jpg', + cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg', + state: 'loading', + }, + { + url: 'https://varlet.gitee.io/varlet-ui/cat.jpg', + cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg', + state: 'success', + }, + { + url: 'https://varlet.gitee.io/varlet-ui/cat.jpg', + cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg', + state: 'error', + }, + ], }) const handleAfterRead = (file) => console.log(file) @@ -124,10 +157,9 @@ export default { if (file.file.size <= 1 * 1024 * 1024) { Snackbar.success(pack.value.fileLessThen) return true - } - Snackbar.warning(pack.value.fileLargeThen) - return false - + } + Snackbar.warning(pack.value.fileLargeThen) + return false } const handleBeforeRemove = async () => { @@ -159,4 +191,14 @@ export default { .space { height: 40px; } + +.custom-uploader__file-list { + display: flex; + .custom-uploader__file-item { + width: 40px; + height: 40px; + border-radius: 50%; + font-size: 12px; + } +} diff --git a/packages/varlet-ui/src/uploader/example/locale/en-US.ts b/packages/varlet-ui/src/uploader/example/locale/en-US.ts index 5a5990337d5..e0daa23e3f4 100644 --- a/packages/varlet-ui/src/uploader/example/locale/en-US.ts +++ b/packages/varlet-ui/src/uploader/example/locale/en-US.ts @@ -17,4 +17,5 @@ export default { fileSizeExceedsLimit: 'file size exceeds limit', fileLessThen: 'the file is less than 1M, the upload is successful', fileLargeThen: 'the file is larger than 1M and cannot be uploaded', + customRender: 'Custom render file list', } diff --git a/packages/varlet-ui/src/uploader/example/locale/zh-CN.ts b/packages/varlet-ui/src/uploader/example/locale/zh-CN.ts index 808f1a852f1..370dcf90546 100644 --- a/packages/varlet-ui/src/uploader/example/locale/zh-CN.ts +++ b/packages/varlet-ui/src/uploader/example/locale/zh-CN.ts @@ -17,4 +17,5 @@ export default { fileSizeExceedsLimit: '文件大小超出限制', fileLessThen: '文件小于1M，上传成功', fileLargeThen: '文件大于1M，不能上传', + customRender: '自定义渲染文件列表', } diff --git a/packages/varlet-ui/src/uploader/props.ts b/packages/varlet-ui/src/uploader/props.ts index b597dae2197..2edca7c662e 100644 --- a/packages/varlet-ui/src/uploader/props.ts +++ b/packages/varlet-ui/src/uploader/props.ts @@ -62,6 +62,10 @@ export const props = { rules: { type: Array as PropType any>>, }, + hideList: { + type: Boolean, + default: false, + }, onBeforeRead: { type: Function as PropType<(file: VarFile) => Promise | boolean>, }, diff --git a/scripts/bootstrap.mjs b/scripts/bootstrap.mjs index bf1ee865f0e..cdc7399c045 100644 --- a/scripts/bootstrap.mjs +++ b/scripts/bootstrap.mjs @@ -1,9 +1,5 @@ import { buildCli, buildIcons, buildUI, runTask } from './build.mjs' - ;(async () => { - await Promise.all([ - runTask('cli', buildCli), - runTask('icons', buildIcons), - ]) + await Promise.all([runTask('cli', buildCli), runTask('icons', buildIcons)]) await runTask('ui', buildUI) })() From 38029568a0187fcc0f85f92b6f462a7c237a692a Mon Sep 17 00:00:00 2001 From: wegi8 <18272190626@163.com> Date: Sun, 13 Mar 2022 16:10:37 +0800 Subject: [PATCH 2/2] fix(ui/uploader): update the ui/uploader snapshot --- .../__snapshots__/index.spec.js.snap | 44 +++++++++++++++++++ .../src/uploader/__tests__/index.spec.js | 27 ++++++++++++ .../varlet-ui/src/uploader/example/index.vue | 1 - 3 files changed, 71 insertions(+), 1 deletion(-) diff --git a/packages/varlet-ui/src/uploader/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/uploader/__tests__/__snapshots__/index.spec.js.snap index 1c3aa2e6ff2..95be64ab652 100644 --- a/packages/varlet-ui/src/uploader/__tests__/__snapshots__/index.spec.js.snap +++ b/packages/varlet-ui/src/uploader/__tests__/__snapshots__/index.spec.js.snap @@ -273,9 +273,53 @@ exports[`test uploader example 1`] = ` +
自定义渲染文件列表
+
+
+
+
+
+
+
+
+ + + + +
+
+ + + +
+ +
+
" `; +exports[`test uploader hide file list 1`] = ` +"
+
+
+
+ + + + +
+
+ + + +
+ +
" +`; + exports[`test uploader length over maxlength in multiple mode 1`] = ` "
diff --git a/packages/varlet-ui/src/uploader/__tests__/index.spec.js b/packages/varlet-ui/src/uploader/__tests__/index.spec.js index 9021de10767..8cb5f1d1824 100644 --- a/packages/varlet-ui/src/uploader/__tests__/index.spec.js +++ b/packages/varlet-ui/src/uploader/__tests__/index.spec.js @@ -242,3 +242,30 @@ test('test uploader length over maxlength in multiple mode', async () => { wrapper.unmount() mockRestore() }) + +test('test uploader hide file list', async () => { + const { mockRestore } = mockFileReader('data:image/png;base64,') + const onUpdateModelValue = jest.fn((value) => wrapper.setProps({ modelValue: value })) + + const wrapper = mount(VarUploader, { + props: { + hideList: true, + modelValue: [], + 'onUpdate:modelValue': onUpdateModelValue, + }, + }) + + expect(wrapper.html()).toMatchSnapshot() + + const event = { + target: { + files: [new File([], 'cat.png'), new File([], 'dog.png')], + }, + } + + await wrapper.vm.handleChange(event) + expect(wrapper.vm.renderFileList.length).toBe(0) + + wrapper.unmount() + mockRestore() +}) diff --git a/packages/varlet-ui/src/uploader/example/index.vue b/packages/varlet-ui/src/uploader/example/index.vue index ffae4749439..5bcba2da18e 100644 --- a/packages/varlet-ui/src/uploader/example/index.vue +++ b/packages/varlet-ui/src/uploader/example/index.vue @@ -49,7 +49,6 @@ {{ pack.upload }}
-