From 948ee44f79dd5dca6f4f63b5001d1bd70025798c Mon Sep 17 00:00:00 2001
From: hooray <304327508@qq.com>
Date: Fri, 8 Oct 2021 16:26:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=9B=BE=E7=89=87=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ImageUpload/index.vue             |  6 +++++-
 .../component_extend_example/upload.demo.vue     | 16 ++++++++++------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index 0899d37c..2bc2f3e1 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -22,7 +22,7 @@
                 <el-image :src="url" :style="`width:${width}px;height:${height}px;`" fit="fill" />
                 <div class="mask">
                     <div class="actions">
-                        <span title="预览" @click.stop="imageViewerVisible = true">
+                        <span title="预览" @click.stop="preview">
                             <i class="el-icon-zoom-in" />
                         </span>
                         <span title="移除" @click.stop="remove">
@@ -105,6 +105,10 @@ const data = ref({
     }
 })
 
+// 预览
+function preview() {
+    data.value.imageViewerVisible = true
+}
 // 关闭预览
 function previewClose() {
     data.value.imageViewerVisible = false
diff --git a/src/views/component_extend_example/upload.demo.vue b/src/views/component_extend_example/upload.demo.vue
index 4a841f45..f8d15e50 100644
--- a/src/views/component_extend_example/upload.demo.vue
+++ b/src/views/component_extend_example/upload.demo.vue
@@ -5,7 +5,7 @@
             <image-upload v-model:url="image" action="http://scrm.1daas.com/api/upload/upload" name="image" :width="250" :height="150" :data="{'token':'TKE615916022101558'}" @on-success="handleSuccess1" />
         </page-main>
         <page-main title="多图上传（默认最多3张）">
-            <images-upload :url="images" action="http://scrm.1daas.com/api/upload/upload" name="image" :data="{'token':'TKE615916022101558'}" @on-success="handleSuccess2" />
+            <images-upload v-model:url="images" action="http://scrm.1daas.com/api/upload/upload" name="image" :data="{'token':'TKE615916022101558'}" @on-success="handleSuccess2" />
         </page-main>
         <page-main title="文件上传（默认最多3个）">
             <file-upload :files="files" action="http://scrm.1daas.com/api/upload/upload" name="image" :data="{'token':'TKE615916022101558'}" @on-success="handleSuccess3" />
@@ -18,11 +18,7 @@ export default {
     data() {
         return {
             image: '',
-            images: [
-                'https://picsum.photos/400',
-                'https://picsum.photos/600',
-                'https://picsum.photos/500'
-            ],
+            images: [],
             files: [
                 {
                     name: '测试文件.zip',
@@ -31,6 +27,14 @@ export default {
             ]
         }
     },
+    mounted() {
+        this.image = 'https://picsum.photos/400'
+        this.images = [
+            'https://picsum.photos/400',
+            'https://picsum.photos/600',
+            'https://picsum.photos/500'
+        ]
+    },
     methods: {
         handleSuccess1(res) {
             if (res.error == '') {