From 89b6be286d7dbc82690a9082f90d616a31516c82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Thu, 13 Jul 2023 13:00:12 +0800
Subject: [PATCH] =?UTF-8?q?:zap:=20=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=A2=84=E8=A7=88=E6=96=B0=E5=A2=9E=E5=A4=8D?=
 =?UTF-8?q?=E5=88=B6=E5=9C=B0=E5=9D=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ImageUpload/index.vue | 36 +++++++++++++++++++++-------
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index 29db740..c7bd209 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -31,8 +31,23 @@
       的文件
     </div>
 
-    <el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
-      <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
+    <el-dialog v-model="dialogVisible" append-to-body>
+      <el-form label-width="100px">
+        <el-form-item label="预览">
+          <el-image style="display: block; max-width: 50%" :src="dialogImageUrl">
+            <template #error>
+              <div class="image-slot">加载失败</div>
+            </template>
+          </el-image>
+        </el-form-item>
+
+        <el-form-item label="访问路径">
+          <el-link type="warning" :href="dialogImageUrl" target="_blank">{{ dialogImageUrl }}</el-link>
+          <el-button type="danger" text icon="document-copy" plain class="ml10" v-clipboard:success="copySuccess" v-clipboard:copy="dialogImageUrl"
+            >复制</el-button
+          >
+        </el-form-item>
+      </el-form>
     </el-dialog>
   </div>
 </template>
@@ -45,27 +60,27 @@ const props = defineProps({
   // 图片数量限制
   limit: {
     type: Number,
-    default: 5,
+    default: 5
   },
   // 大小限制(MB)
   fileSize: {
     type: Number,
-    default: 5,
+    default: 5
   },
   // 文件类型, 例如['png', 'jpg', 'jpeg']
   fileType: {
     type: Array,
-    default: () => ['png', 'jpg', 'jpeg'],
+    default: () => ['png', 'jpg', 'jpeg']
   },
   // 是否显示提示
   isShowTip: {
     type: Boolean,
-    default: true,
+    default: true
   },
   // 上传携带的参数
   data: {
-    type: Object,
-  },
+    type: Object
+  }
 })
 
 const { proxy } = getCurrentInstance()
@@ -102,7 +117,7 @@ watch(
       return []
     }
   },
-  { deep: true, immediate: true },
+  { deep: true, immediate: true }
 )
 
 // 删除图片
@@ -187,4 +202,7 @@ function listToString(list, separator) {
   }
   return strs != '' ? strs.substr(0, strs.length - 1) : ''
 }
+function copySuccess() {
+  proxy.$modal.msgSuccess('复制成功')
+}
 </script>