在Vue3中实现简单的自定义插件实现全局加载loading动画蒙层效果

在项目中个别页面需要用到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实现的动画效果。