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/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..5bcba2da18e 100644
--- a/packages/varlet-ui/src/uploader/example/index.vue
+++ b/packages/varlet-ui/src/uploader/example/index.vue
@@ -34,6 +34,21 @@
{{ pack.validate }}
+
{{ pack.customRender }}
+
+
+
![]()
+
+
+ {{ pack.upload }}
+
+
@@ -104,6 +119,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 +156,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 +190,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)
})()
![](\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\")