custom request loading anime

client/components.d.ts

@@ -26,6 +26,7 @@ declare module '@vue/runtime-core' {
     FilmList: typeof import('./src/components/FilmList.vue')['default']
     Footer: typeof import('./src/components/Footer.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']
+    Loading: typeof import('./src/components/Loading/Loading.vue')['default']
     RelateList: typeof import('./src/components/RelateList.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

client/src/components/Loading/Loading.vue

@@ -0,0 +1,120 @@
+<template>
+    <div class="loader"  v-show="msg.show">
+        <div class="loader-container">
+            <div class="dot"></div>
+            <div class="dot"></div>
+            <div class="dot"></div>
+            <div class="dot"></div>
+            <div class="dot"></div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+    msg:{
+    },
+})
+</script>
+
+<style scoped>
+/*body {*/
+/*    margin: 0;*/
+/*}*/
+.loader {
+    position: fixed;
+    width: 100%;
+    height: 100vh;
+    top: 50%;
+    left: 40%;
+    margin-left: 10%;
+    transform: translate3d(-50%, -50%, 0);
+    background: rgba(0,0,0, 0.65);
+    z-index: 2002;
+    overflow-y: hidden;
+}
+.loader-container {
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    display: flex;
+    justify-content: center;
+}
+.dot {
+    width: 24px;
+    height: 24px;
+    background: #3ac;
+    border-radius: 100%;
+    display: inline-block;
+    animation: slide 1s infinite;
+}
+.dot:nth-child(1) {
+    animation-delay: 0.1s;
+    background: #32aacc;
+}
+.dot:nth-child(2) {
+    animation-delay: 0.2s;
+    background: #64aacc;
+}
+.dot:nth-child(3) {
+    animation-delay: 0.3s;
+    background: #96aacc;
+}
+.dot:nth-child(4) {
+    animation-delay: 0.4s;
+    background: #c8aacc;
+}
+.dot:nth-child(5) {
+    animation-delay: 0.5s;
+    background: #faaacc;
+}
+@-moz-keyframes slide {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.3;
+        transform: scale(2);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+@-webkit-keyframes slide {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.3;
+        transform: scale(2);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+@-o-keyframes slide {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.3;
+        transform: scale(2);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+@keyframes slide {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.3;
+        transform: scale(2);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+</style>

client/src/components/Loading/index.ts

@@ -0,0 +1,25 @@
+import { createApp, reactive } from 'vue'
+
+import customLoading from './Loading.vue'
+
+const msg = reactive({
+    show: false,
+    title: '拼命加载中...'
+})
+
+const $loading = createApp(customLoading, {msg}).mount(document.createElement('div'))
+const load = {
+    start(title:string) { // 控制显示loading的方法
+        msg.show = true
+        msg.title = title
+        document.body.appendChild($loading.$el)
+        document.body.style.overflow = 'hidden'
+    },
+    close() { // 控制loading隐藏的方法
+        msg.show = false
+        document.body.style.overflow = 'auto'
+    }
+}
+export  { load }
+
+

client/src/main.ts

@@ -5,7 +5,7 @@ import { router} from "./router/router";
 // 引入elementPlus
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-
+// 使用自定义loading
 
 
 const app = createApp(App)
@@ -17,7 +17,8 @@ app.use(router)
 
 
 
-
 app.mount('#app')
 
+export default app
+
 

client/src/style.css

@@ -78,3 +78,5 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+

client/src/utils/request.ts

@@ -1,25 +1,18 @@
 import axios from "axios";
-import {ElMessage, ElLoading } from "element-plus";
+import {ElMessage } from "element-plus";
+
+// 自定义loading加载动画
+import {load} from "../components/Loading";
 
-// 创建loading加载动画对象
-const startLoading = ()=>{
-    return  ElLoading.service({
-        lock: true,
-        text: `加载中...`,
-        background: `rgba(0,0,0,0.5)`,
-        // target: document.querySelector(`.content`)
-    })
-}
 
 const http = (options: any) => {
     // 开启loading动画
-    let loading:any = startLoading()
+    load.start('')
     return new Promise((resolve, reject) => {
         // create an axios instance
         const service = axios.create({
             // baseURL: import.meta.env.VITE_URL_BASE, // api 的 base_url 注意 vue3
-            baseURL: `/api`, // api 的 base_url 注意 vue3
-            //   baseURL: 'https://www.baidu.com/api',  // 固定api
+            baseURL: `/api`, // api 的 base_url 注意 vue3 // 固定api
             timeout: 80000, // request timeout
         });
 
@@ -45,7 +38,7 @@ const http = (options: any) => {
         // response interceptor
         service.interceptors.response.use(
             (response) => {
-                loading.close()
+                load.close()
                 return response.data;
             },
             (error) => {

client/src/views/index/Home.vue

@@ -1,6 +1,5 @@
 <template>
     <div class="container">
-
         <div class="content_item" v-for="item in data.info.content">
             <template v-if="item.nav.name !='综艺' & item.nav.name !='综艺片'">
                 <el-row class="row-bg  cus_nav" justify="space-between">