Prefect attachment drawer and detail drawer

src/views/attachment/components/AttachmentDetailDrawer.vue

@@ -143,11 +143,24 @@ export default {
     }
   },
   created() {
-    setTimeout(() => {
+    this.loadSkeleton()
-      this.detailLoading = false
+  },
-    }, 300)
+  watch: {
+    visiable: function(newValue, oldValue) {
+      this.$log.debug('old value', oldValue)
+      this.$log.debug('new value', newValue)
+      if (newValue) {
+        this.loadSkeleton()
+      }
+    }
   },
   methods: {
+    loadSkeleton() {
+      this.detailLoading = true
+      setTimeout(() => {
+        this.detailLoading = false
+      }, 500)
+    },
     deleteAttachment() {
       attachmentApi.delete(this.attachment.id).then(response => {
         this.$message.success('删除成功！')

src/views/attachment/components/AttachmentDrawer.vue

@@ -17,10 +17,15 @@
           enterButton
         />
       </a-row>
-      <a-divider></a-divider>
+      <a-divider />
       <a-row
         type="flex"
         align="middle"
+      >
+        <a-skeleton
+          active
+          :loading="skeletonLoading"
+          :paragraph="{ rows: 8 }"
         >
           <a-col :span="24">
             <div
@@ -32,8 +37,9 @@
               <img :src="item.thumbPath">
             </div>
           </a-col>
+        </a-skeleton>
       </a-row>
-      <a-divider></a-divider>
+      <a-divider />
       <a-row
         type="flex"
         justify="end"
@@ -108,9 +114,10 @@ export default {
       detailVisiable: false,
       attachmentDrawerVisible: false,
       uploadVisible: false,
+      skeletonLoading: true,
       pagination: {
         page: 1,
-        size: 8,
+        size: 14,
         sort: ''
       },
       attachments: [],
@@ -119,9 +126,23 @@ export default {
     }
   },
   created() {
+    this.loadSkeleton()
     this.loadAttachments()
   },
+  watch: {
+    visiable: function(newValue, oldValue) {
+      if (newValue) {
+        this.loadSkeleton()
+      }
+    }
+  },
   methods: {
+    loadSkeleton() {
+      this.skeletonLoading = true
+      setTimeout(() => {
+        this.skeletonLoading = false
+      }, 500)
+    },
     showUploadModal() {
       this.uploadVisible = true
     },