我使用的比较多的是阿里的ant-design-vue组件库。
在这里好像没有找到太好用的全局loading。
组件库没有，那就自定义一个吧，主要是定义成啥样的呢？嗯……layui没黄之前，他那个loading我甚是喜欢，就整他了。
我这里使用的是VUE3.2+typescript，上代码：
loading.vue
<template> <div class="loading" v-show="msg?.show"> <div> <!-- <img src="@/assets/images/loading.gif" alt="" srcset="" /> --> <img src="/src/assets/img/loading-0.gif" alt="" srcset="" /> </div> </div> </template> <script lang="ts"> export default { props: { msg: Object, aaa: Number, }, }; </script> <style scoped lang="scss"> .loading { width: 100%; height: 100%; // background-color: rgba(0, 0, 0, 0.2); position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; z-index: 1000000000000000000000000; div { color: #fff; padding: 6px 15px; } } </style>
loading.ts
import { createApp, reactive } from 'vue' import myLoad from '/@/components/loading/loading.vue' // 引入公共js文件 import utils from "/@/assets/js/public/function"; const msg = reactive({ show: false, title: '拼命加载中...' }) const $loading = createApp(myLoad, {msg}).mount(document.createElement('div')) // console.log($loading); export const load = { show(title:any = '') { // 控制显示loading的方法 msg.show = true msg.title = title document.body.appendChild($loading.$el) }, hide(time:number = 1000) { // 控制loading隐藏的方法 // 延迟 1秒 utils.sleep(time).then(() => { msg.show = false }); } } // export { load } // export default { // install(app) { // // console.log(app); // // Vue.prototype.$http = axios // app.config.globalProperties.$loading = load // } // }
utils.sleep
/** * @name: 程序停止执行时间（睡一会儿） * @author: camellia * @email: guanchao_gc@qq.com * @date: 2020-12-21 * @param: time number 显示时间 */ sleep(time: number) { return new Promise((resolve) => setTimeout(resolve, time)); // utils.sleep(500).then(() => { // // 这里写sleep之后需要去做的事情 // console.log(router.currentRoute.value); // }); }
调用：
1：引入
import { load } from "/@/components/loading/loading";
2：调用
load.show(); load.hide();
最终效果我这里就不做展示了，有兴趣可以自己尝试一下。
有好的建议，请在下方输入您的评论。
