From 002adf462f069425874f9875219a6d6dfb027129 Mon Sep 17 00:00:00 2001 From: Victor Zhuk Date: Mon, 24 Jun 2019 12:33:04 +0300 Subject: [PATCH] Upload: add capability to customize thumbnail template (#13192) --- examples/docs/en-US/upload.md | 69 ++++++++++++++++++++++++++ examples/docs/es/upload.md | 69 ++++++++++++++++++++++++++ examples/docs/fr-FR/upload.md | 69 ++++++++++++++++++++++++++ examples/docs/zh-CN/upload.md | 69 ++++++++++++++++++++++++++ packages/upload/src/index.vue | 9 ++++ packages/upload/src/upload-list.vue | 76 +++++++++++++++-------------- 6 files changed, 324 insertions(+), 37 deletions(-) diff --git a/examples/docs/en-US/upload.md b/examples/docs/en-US/upload.md index 74f873488..0d377f276 100644 --- a/examples/docs/en-US/upload.md +++ b/examples/docs/en-US/upload.md @@ -154,6 +154,75 @@ Use `list-type` to change the fileList style. ``` ::: +### Custom file thumbnail + +Use `scoped-slot` to change default thumbnail template. + +:::demo +```html + + +
+ + + + + + + + + + + + +
+ + + + + +``` +::: + ### FileList with thumbnail :::demo diff --git a/examples/docs/es/upload.md b/examples/docs/es/upload.md index 3a8ff33fd..57a2d96d3 100644 --- a/examples/docs/es/upload.md +++ b/examples/docs/es/upload.md @@ -150,6 +150,75 @@ Utilice la propiedad `list-type` para cambiar el estilo a un listado de archivos ``` ::: +### Custom file thumbnail + +Use `scoped-slot` to change default thumbnail template. + +:::demo +```html + + +
+ + + + + + + + + + + + +
+ + + + + +``` +::: + ### Lista de archivos con miniatura :::demo diff --git a/examples/docs/fr-FR/upload.md b/examples/docs/fr-FR/upload.md index 9319f7f7f..7592f7200 100644 --- a/examples/docs/fr-FR/upload.md +++ b/examples/docs/fr-FR/upload.md @@ -154,6 +154,75 @@ Utilisez `list-type` pour changer le style de la liste de fichiers. ``` ::: +### Custom file thumbnail + +Use `scoped-slot` to change default thumbnail template. + +:::demo +```html + + +
+ + + + + + + + + + + + +
+ + + + + +``` +::: + ### Liste de fichiers avec miniatures :::demo diff --git a/examples/docs/zh-CN/upload.md b/examples/docs/zh-CN/upload.md index 2cc7a1e2d..6fbc37d78 100644 --- a/examples/docs/zh-CN/upload.md +++ b/examples/docs/zh-CN/upload.md @@ -154,6 +154,75 @@ ``` ::: +### 文件缩略图 + +使用 `scoped-slot` 去设置缩略图模版。 + +:::demo +```html + + +
+ + + + + + + + + + + + +
+ + + + + +``` +::: + ### 图片列表缩略图 :::demo diff --git a/packages/upload/src/index.vue b/packages/upload/src/index.vue index 998cfd429..e73565359 100644 --- a/packages/upload/src/index.vue +++ b/packages/upload/src/index.vue @@ -276,6 +276,15 @@ export default { files={this.uploadFiles} on-remove={this.handleRemove} handlePreview={this.onPreview}> + { + (props) => { + if (this.$scopedSlots.file) { + return this.$scopedSlots.file({ + file: props.file + }); + } + } + } ); } diff --git a/packages/upload/src/upload-list.vue b/packages/upload/src/upload-list.vue index ce9e7c260..7178d4fbb 100644 --- a/packages/upload/src/upload-list.vue +++ b/packages/upload/src/upload-list.vue @@ -18,45 +18,47 @@ @blur="focusing = false" @click="focusing = false" > - - - {{file.name}} - - - - {{ t('el.upload.deleteTip') }} - - - - + - + + {{file.name}} + + + + {{ t('el.upload.deleteTip') }} + + + + + + + + + - - - - +