add 查看详情添加加载动画

view/src/page/subscribe/addSubscribe.vue

@@ -3,7 +3,7 @@
   <div>
     <div class="list">
       <div class="item" v-for="i in list">
-        <el-card :body-style="{ padding: '0px' }">
+        <el-card @click="getInfo(i.id)" shadow="hover" :body-style="{ padding: '0px' }">
           <img :src="i.img" class="image"/>
           <div style="padding: 14px">
             <span>{{ i.title }}({{ i.year }})</span>
@@ -33,6 +33,7 @@
 import {ref} from 'vue';
 import {getVideoInfo, searchVideo} from '../../api/Video.js'
 import {onBeforeRouteUpdate, useRoute} from "vue-router";
+import {ElLoading} from "element-plus";
 
 let list = ref([])
 const info = ref("")
@@ -53,12 +54,17 @@ onBeforeRouteUpdate(next => {
 let vid = "";
 const dialogFormVisible = ref(false)
 
+
 async function getInfo(id) {
+  const loadingInstance = ElLoading.service({fullscreen: true})
   vid = id
   let res = await getVideoInfo(id)
   info.value = res.data.format
   dialogFormVisible.value = true
+  loadingInstance.close()
 }
+
+
 </script>
 
 <style lang="scss" scoped>