
在Vue3中实现简单的自定义插件实现全局加载loading动画蒙层效果
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
在项目中个别页面需要用到loading加载动画蒙层效果,自定义创建一个简单的插件实现该效果,在需要使用的页面引入即可,方便复用。
呈现效果如下(动画效果和文字提示根据自己需求更换,我这里使用的是css可视化库,地址放在文章末尾):
一、在compoents中创建一个loading组件:
html部分:
<template>
<div v-if="visible" class="loading-overlay">
<div class="loading-spinner"></div>
<p>{{ message }}</p>
</div>
</template>
scss部分:
<style lang="scss" scoped>
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(230, 253, 260, 0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1000;
p {
margin-top: 60px;
font-size: 26px;
color: #29d78b;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-spinner {
position: relative;
width: 106px;
height: 56px;
background-image: linear-gradient(#29d78b 50px, transparent 0),
linear-gradient(#29d78b 50px, transparent 0),
linear-gradient(#29d78b 50px, transparent 0),
linear-gradient(#29d78b 50px, transparent 0),
radial-gradient(circle 14px, #29d78b 100%, transparent 0);
background-size: 48px 15px, 15px 35px, 15px 35px, 25px 15px, 28px 28px;
background-position: 25px 5px, 58px 20px, 25px 17px, 2px 37px, 76px 0px;
background-repeat: no-repeat;
transform: rotate(-45deg);
&::after,
&::before {
content: "";
position: absolute;
left: -45px;
top: -10px;
width: 56px;
height: 56px;
border: 6px solid #29d78b;
border-radius: 50%;
background-repeat: no-repeat;
background-image: linear-gradient(#29d78b 64px, transparent 0),
linear-gradient(#29d78b 66px, transparent 0),
radial-gradient(circle 4px, #29d78b 100%, transparent 0);
background-size: 40px 1px, 1px 40px, 8px 8px;
background-position: center center;
-webkit-animation: rotation 0.3s linear infinite;
animation: rotation 0.3s linear infinite;
}
&::before {
left: 25px;
top: 60px;
}
}
}
</style>
js部分:
<script setup>
const visible = ref(false);
const message = ref("");
const open = (msg) => {
message.value = msg;
visible.value = true;
};
const close = () => {
visible.value = false;
};
// 通过 defineExpose暴露open和close方法,显式地暴露组件内部的方法或属性,使得这些方法或属性可以在外部被访问和调用
defineExpose({
open,
close,
});
</script>
二、在plugins文件夹下面创建一个loading.js
import { createApp } from 'vue';
import LoadingComponent from '@/components/common/Loading/index.vue';
let loadingInstance;
const LoadingService = {
open(message = '加载中...') {
if (!loadingInstance) {
const loadingApp = createApp(LoadingComponent);
const mountNode = document.createElement('div');
document.body.appendChild(mountNode);
loadingInstance = loadingApp.mount(mountNode);
}
loadingInstance.open(message);
},
close() {
if (loadingInstance) {
loadingInstance.close();
}
},
};
export default LoadingService;
三、页面中使用:
<script setup>
import LoadingPlugin from "@/plugins/loading.js";
onMounted(() => {
getTerrainTypeData();
};
const getTerrainTypeData = async () => {
LoadingPlugin.open('请稍等,数据加载中...');
const data = {
pastoralId: userStoreData.user.pastoralId,
phase: userStoreData.user.phase,
placeIndex: 2,
};
try {
const res = await proxy.$http.topNav.findTerrainTypeData(data);
if (res && res.status == 2000) {
terrains.value.forEach((terrain) => {
if (res.data.zoneMap[terrain.id]) {
terrain.label = res.data.zoneMap[terrain.id].decideName;
const selectedImage = bigImages.value.find(
(image) => image.id === res.data.zoneMap[terrain.id].decideIndex
);
terrain.imageSrc = selectedImage.url;
}
});
}
} catch (error) {
ElMessage.error('数据加载失败');
}finally{
LoadingPlugin.close();
}
};
<script>
这样就实现了一个简单的loading加载动画蒙层效果插件,支持在项目中任何需要使用的地方直接引入使用 ,vue2实现原理类似,动画效果可参考借鉴Web安全色 | CSS可视化,里面有很多纯css实现的动画效果。




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079
[skip ci] 3 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
更多推荐
所有评论(0)