From 7850060991808a7cb833770e6b6d85a1acc40316 Mon Sep 17 00:00:00 2001
From: Gao xiaosong <704041637@qq.com>
Date: Tue, 31 May 2022 12:24:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=80=89=E4=B8=ADadv?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=8A=A5=E9=94=99=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../toolModule/tool-single-img.vue            | 120 ++++++++++--------
 1 file changed, 70 insertions(+), 50 deletions(-)

diff --git a/src/views/theme/components/rootcompToolbar/toolModule/tool-single-img.vue b/src/views/theme/components/rootcompToolbar/toolModule/tool-single-img.vue
index 09282a3..d6c91c3 100644
--- a/src/views/theme/components/rootcompToolbar/toolModule/tool-single-img.vue
+++ b/src/views/theme/components/rootcompToolbar/toolModule/tool-single-img.vue
@@ -8,19 +8,39 @@
         :before-upload="beforeAvatarUpload"
         :show-file-list="false"
       >
-        <img v-if="imageUrl" :src="imageUrl" class="single-img__img">
-        <i v-else class="el-icon-upload">
+        <img
+          v-if="imageUrl"
+          :src="imageUrl"
+          class="single-img__img"
+        >
+        <i
+          v-else
+          class="el-icon-upload"
+        >
           <div class="el-upload__text"><em>选择图片</em></div>
-          <div class="el-upload__tip" slot="tip">{{tip}}</div>
+          <div
+            class="el-upload__tip"
+            slot="tip"
+          >{{tip.label}}</div>
         </i>
       </el-upload>
-      <div class="overlay" v-if="imageUrl">
+      <div
+        class="overlay"
+        v-if="imageUrl"
+      >
         <!-- <i class="iconfont icon-chakan" @click="showImage"></i>
         <i class="iconfont icon-shanchu1" @click="delImage"></i> -->
       </div>
     </div>
-    <el-dialog title="图片展示" :visible.sync="dialogVisible">
-      <img width="100%" :src="dialogImageUrl" alt="">
+    <el-dialog
+      title="图片展示"
+      :visible.sync="dialogVisible"
+    >
+      <img
+        width="100%"
+        :src="dialogImageUrl"
+        alt=""
+      >
     </el-dialog>
   </div>
 </template>
@@ -41,12 +61,12 @@ export default {
       default: ''
     },
     tip: {
-      type: String,
-      default: '建议尺寸: 1080*900px, 小于1MB'
+      type: Object,
+      default:()=>({}),
     }
   },
   mounted () {
-    this.fileUploadURL = process.env.VUE_APP_BASE_API +'/api/canvas/upload?name=demo&type=console'
+    this.fileUploadURL = process.env.VUE_APP_BASE_API + '/api/canvas/upload?name=demo&type=console'
   },
   methods: {
     handleAvatarSuccess (res, file) {
@@ -71,53 +91,53 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .single-img{
-    &__box{
-      position: relative;
-      >>> .el-upload{
-        width: 100%;
+.single-img {
+  &__box {
+    position: relative;
+    >>> .el-upload {
+      width: 100%;
+    }
+    >>> .el-upload-dragger {
+      width: 100%;
+      .el-upload__text {
+        line-height: 40px;
       }
-      >>> .el-upload-dragger{
-        width: 100%;
-        .el-upload__text{
-          line-height: 40px;
-        }
-        .el-upload__tip{
-          line-height: 1em;
-        }
-      }
-      .overlay{
-        display: none;
-      }
-      &:hover .overlay{
-        position: absolute;
-        top:0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0,0,0,0.3);
-        color: #fff;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        .iconfont{
-          padding: 5px;
-          margin: 0 5px;
-          font-size: 20px;
-          cursor: pointer;
-        }
+      .el-upload__tip {
+        line-height: 1em;
       }
     }
-    &__img{
+    .overlay {
+      display: none;
+    }
+    &:hover .overlay {
       position: absolute;
-      max-width: 100%;
-      height: 100%;
-      max-height: 100%;
-      margin: auto;
       top: 0;
-      right: 0;
-      bottom: 0;
       left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.3);
+      color: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .iconfont {
+        padding: 5px;
+        margin: 0 5px;
+        font-size: 20px;
+        cursor: pointer;
+      }
     }
   }
+  &__img {
+    position: absolute;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+    margin: auto;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}
 </style>