flat: 暂存

src/components/Custom-Loading/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="loading-container" v-show="visible">
       <div class="content">
-        <img src="@/assets/loading.gif" class="image" >
+        <img src="@/assets/loading.gif" :style="{width: Sized, height: Sized}">
         <div class="text">
           {{loadingText}}
         </div>
@@ -10,9 +10,21 @@
 </template>
 
 <script>
+
+const classEnum = {
+  small: '56px',
+  default: '86px',
+  large: '106px',
+  largeX: '126px',
+  largeXX: '146px',
+  largeXXL: '186px',
+}
 export default {
   name: "loading",
-  data: {
+  data() {
+    return {
+      size: '100px'
+    }
   },
   props: {
     visible: {
@@ -30,7 +42,21 @@ export default {
       type: Boolean,
       required: false,
     },
-  }
+    size: {
+      type: String,
+      default: 'default',
+      required: false,
+    }
+  },
+  computed: {
+    Sized() {
+      if(Object.keys(classEnum).some((item) => item === this.size)) {
+        return classEnum[this.size]
+      } else {
+        return classEnum.default
+      }
+    }
+  },
 }
 </script>
 
@@ -51,7 +77,15 @@ export default {
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    .image{
+    .image_small{
+      width: 56px;
+      height: 56px;
+    }
+    .image_default{
+      width: 100px;
+      height: 100px;
+    }
+    .image_large{
       width: 180px;
       height: 180px;
     }