diff --git a/client/components.d.ts b/client/components.d.ts index 59269f3..f357a1c 100644 --- a/client/components.d.ts +++ b/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'] diff --git a/client/src/components/Loading/Loading.vue b/client/src/components/Loading/Loading.vue new file mode 100644 index 0000000..a15109f --- /dev/null +++ b/client/src/components/Loading/Loading.vue @@ -0,0 +1,120 @@ + + + + + \ No newline at end of file diff --git a/client/src/components/Loading/index.ts b/client/src/components/Loading/index.ts new file mode 100644 index 0000000..a8440d0 --- /dev/null +++ b/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 } + + diff --git a/client/src/main.ts b/client/src/main.ts index 544ad7e..893f543 100644 --- a/client/src/main.ts +++ b/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 + diff --git a/client/src/style.css b/client/src/style.css index 830579a..dfa5205 100644 --- a/client/src/style.css +++ b/client/src/style.css @@ -78,3 +78,5 @@ button:focus-visible { background-color: #f9f9f9; } } + + diff --git a/client/src/utils/request.ts b/client/src/utils/request.ts index cb92051..b29f4bf 100644 --- a/client/src/utils/request.ts +++ b/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) => { diff --git a/client/src/views/index/Home.vue b/client/src/views/index/Home.vue index 4c9273f..bf2ea00 100644 --- a/client/src/views/index/Home.vue +++ b/client/src/views/index/Home.vue @@ -1,6 +1,5 @@