优化图片上传组件

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

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 == '') {