blackteay/ThinkAdmin
1
0
Fork 0
mirror of https://gitee.com/zoujingli/ThinkAdmin.git synced 2025-04-05 19:41:44 +08:00
Code Issues Projects Releases Wiki Activity

增加 loading

Browse Source
This commit is contained in:
Anyon 2022-03-08 13:48:03 +08:00
parent 9a36bfd369
commit d80dc69c0e
2 changed files with 86 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
index.html
View File

@ -23,9 +23,90 @@
<!-- 加载基础框架模块 --> <!-- 加载基础框架模块 -->
<script type="module" src="static/app.js"></script> <script type="module" src="static/app.js"></script>
<style>
@keyframes shadow {
0%,
100% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1);
}
}
@keyframes loading {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(9px) rotate(22.5deg);
}
50% {
border-bottom-right-radius: 40px;
transform: translateY(18px) scale(1, 0.9) rotate(45deg);
}
75% {
transform: translateY(9px) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
.think-page-loader {
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1999;
position: fixed;
text-align: center;
background-color: #EFEFEF;
}
.think-page-loader .loader {
top: 50%;
width: 50px;
height: 50px;
margin: -35px 0 0 -35px;
z-index: 999999;
display: inline-block;
position: fixed;
background-color: #EFEFEF;
}
.think-page-loader .loader:before {
top: 59px;
left: 0;
width: 50px;
height: 7px;
opacity: 0.1;
content: "";
position: absolute;
border-radius: 50%;
background-color: #000;
animation: shadow .5s linear infinite;
}
.think-page-loader .loader:after {
top: 0;
left: 0;
width: 50px;
height: 50px;
content: "";
position: absolute;
border-radius: 3px;
background-color: #5FB878;
animation: loading .5s linear infinite;
}
</style>
</head> </head>
<body> <body>
<div class="think-page-loader">
<div class="loader"></div>
</div>
<router-view></router-view> <router-view></router-view>
</body> </body>

8
static/app.js
View File

@ -3,7 +3,7 @@
/*! 项目应用根路径 */ /*! 项目应用根路径 */
window.appRoot = (function (script) { window.appRoot = (function (script) {
return '/' + script.src.split('/').slice(3, -2).join('/') + '/'; return '/' + script.src.split('/').slice(3, -2).join('/') + '/';
})(document.querySelector('script[type=module][src*="app.js"]')); })(document.querySelector('script[src*="app.js"]'));
/*! 模块加载请求处理 */ /*! 模块加载请求处理 */
const options = { const options = {
@ -31,7 +31,6 @@
const {loadModule} = window['vue3-sfc-loader']; const {loadModule} = window['vue3-sfc-loader'];
const loadVue = (vuePath) => loadModule(vuePath, options); const loadVue = (vuePath) => loadModule(vuePath, options);
// const loadVueFile = (vuePath) => () => loadVue(vuePath);
const router = VueRouter.createRouter({ const router = VueRouter.createRouter({
routes: [], history: VueRouter.createWebHashHistory(), routes: [], history: VueRouter.createWebHashHistory(),
@ -51,6 +50,9 @@
let name = to.fullPath.replace(/[.\/]+/g, '_'); let name = to.fullPath.replace(/[.\/]+/g, '_');
if (router.hasRoute(name)) router.removeRoute(name) if (router.hasRoute(name)) router.removeRoute(name)
if (loading) loading = loading.close(), null; if (loading) loading = loading.close(), null;
document.querySelectorAll('.think-page-loader').forEach(function (el) {
el.style.display = 'none';
});
}); });
// 动态注册路由 // 动态注册路由
@ -58,7 +60,7 @@
router.beforeEach(function (to, fr, next) { router.beforeEach(function (to, fr, next) {
let name = to.fullPath.replace(/[.\/]+/g, '_'); let name = to.fullPath.replace(/[.\/]+/g, '_');
if (router.hasRoute(name)) { if (router.hasRoute(name)) {
console.log('loadPage', to.fullPath) console.log('PAGE-LOADING:', to.fullPath)
loading = ElementPlus.ElLoading.service({ loading = ElementPlus.ElLoading.service({
lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.3)', lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.3)',
}); });