From 0e984575d0bab84e5cd0b751353622e58ac74dd5 Mon Sep 17 00:00:00 2001
From: DebugIsFalse <511418503@qq.com>
Date: Fri, 11 Nov 2022 10:37:01 +0800
Subject: [PATCH] feat:add image custom name #123

---
 examples/routers/image.vue             |  4 ++++
 src/components/image/image-preview.vue | 28 +++++++++++++++++++-------
 src/components/image/image.vue         |  4 +++-
 src/utils/assist.js                    |  2 +-
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/examples/routers/image.vue b/examples/routers/image.vue
index 53dc54102..9b495ae77 100644
--- a/examples/routers/image.vue
+++ b/examples/routers/image.vue
@@ -72,6 +72,7 @@
         v-model="showPreview"
         :previewList="srcList"
         :infinite="false"
+		:renameImage="renameImage"
         :toolbar="['zoomOut', 'original', 'rotateRight', 'rotateLeft', 'zoomIn', 'download']"
     ></ImagePreview>
 
@@ -110,6 +111,9 @@ export default {
                 previewList: this.srcList
             });
         },
+		renameImage(index) {
+			return `custom-name-${index}`
+		},
         showImagePreview2 () {
             this.$ImagePreview.show({
                 previewList: this.srcList2,
diff --git a/src/components/image/image-preview.vue b/src/components/image/image-preview.vue
index 72456b8f8..e39ca376c 100644
--- a/src/components/image/image-preview.vue
+++ b/src/components/image/image-preview.vue
@@ -62,7 +62,7 @@
     import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
     import Row from '../row/row.vue';
     import Col from '../col/col.vue';
-    import { downloadFile } from '../../utils/assist';
+    import { downloadFile, typeOf } from '../../utils/assist';
 
     export default {
         name: 'ImagePreview',
@@ -108,7 +108,8 @@
                         ? ['zoomIn', 'zoomOut', 'original', 'rotateLeft', 'rotateRight', 'download']
                         : global.$VIEWUI.image.toolbar;
                 }
-            }
+            },
+            renameImage: Function
         },
         data() {
             return {
@@ -238,6 +239,23 @@
                 }
                 this.$emit('on-switch', { currentIndex: this.currentIndex });
             },
+            getImageSuffixName () {
+                const { previewList, currentIndex } = this;
+                let imagePath = previewList[currentIndex];
+                const regImageSuffix = /\.(jpg|jpeg|ico|webp|png|pjpeg)$/gi;
+                imagePath = imagePath.replace(regImageSuffix, '');
+                const splitImagePath = imagePath.split('/');
+                return splitImagePath[splitImagePath.length - 1]
+            },
+            handleDownloadImage () {
+                const { previewList, renameImage, currentIndex } = this;
+                const imageName = typeOf(renameImage) === 'function' ? this.renameImage(currentIndex) : this.getImageSuffixName();
+                downloadFile(previewList[currentIndex], imageName).then(() => {
+                    this.downloading = false;
+                }).catch(() => {
+                    this.downloading = false;
+                });
+            },
             handleOperation (val) {
                 if (val === 'zoomIn' && this.scale < 6) this.scale += 0.25;
                 if (val === 'zoomOut' && this.scale > 0.25) this.scale -= 0.25;
@@ -251,11 +269,7 @@
                 }
                 if (val === 'download') {
                     this.downloading = true;
-                    downloadFile(this.previewList[this.currentIndex]).then(() => {
-                        this.downloading = false;
-                    }).catch(() => {
-                        this.downloading = false;
-                    });
+                    this.handleDownloadImage();
                 }
             },
             handleKeydown (event) {
diff --git a/src/components/image/image.vue b/src/components/image/image.vue
index 41098efca..8d4f6521b 100644
--- a/src/components/image/image.vue
+++ b/src/components/image/image.vue
@@ -36,6 +36,7 @@
                 :mask-closable="maskClosable"
                 :transfer="transfer"
                 :toolbar="toolbar"
+                :renameImage="renameImage"
                 @on-close="handleClose"
                 @on-switch="handleSwitch"
             />
@@ -131,7 +132,8 @@
                         ? ['zoomIn', 'zoomOut', 'original', 'rotateLeft', 'rotateRight', 'download']
                         : global.$VIEWUI.image.toolbar;
                 }
-            }
+            },
+            renameImage: Function
         },
         data() {
             return {
diff --git a/src/utils/assist.js b/src/utils/assist.js
index 3125456b6..b8a08b3dd 100644
--- a/src/utils/assist.js
+++ b/src/utils/assist.js
@@ -95,7 +95,7 @@ export function warnProp(component, prop, correctType, wrongType) {
     console.error(`[View UI warn]: Invalid prop: type check failed for prop ${prop}. Expected ${correctType}, got ${wrongType}. (found in component: ${component})`);    // eslint-disable-line
 }
 
-function typeOf(obj) {
+export function typeOf(obj) {
     const toString = Object.prototype.toString;
     const map = {
         '[object Boolean]'  : 'boolean',