Search.vue 添加 loading 动画

src/views/home/Search.vue

@@ -14,7 +14,7 @@
       <el-col :md="6">
         <hot-search :card-prop="cardProp" />
       </el-col>
-      <el-col :md="18">
+      <el-col v-loading="loading" :md="18">
         <el-col v-for="(video,index) in dataList" :key="index" :md="6" :sm="8" :xs="12">
           <video-card :video="video" />
         </el-col>
@@ -68,7 +68,8 @@ export default {
         title: null,
         type: null,
         dataList: []
-      }
+      },
+      loading: false
     }
   },
   mounted() {
@@ -84,7 +85,6 @@ export default {
     this.keyword = this.$route.query.keyword
     this.currentPage = parseInt(this.$route.query.pageNumber)
     this.videoQueryWrapper(this.keyword, this.currentPage)
-
     document.title = '搜索 - ' + this.keyword
   },
   methods: {
@@ -99,6 +99,7 @@ export default {
       this.$router.go(0)
     },
     videoQueryWrapper(keyword, pageNumber) {
+      this.loading = true
       videoQuery(keyword, pageNumber).then(resp => {
         if (resp.code === 0) {
           this.total = resp.data.totalSize
@@ -121,6 +122,8 @@ export default {
           type: 'error',
           duration: 3000
         })
+      }).finally(() => {
+        this.loading = false
       })
     }
   }

src/views/home/Video.vue

@@ -150,13 +150,14 @@ export default {
         }
       }).catch(error => {
         // loading.close()
-        this.loading = false
         this.$notify({
           title: '提示',
           message: error.message,
           type: 'warning',
           duration: 3000
         })
+      }).finally(() => {
+        this.loading = false
       })
     }
   }