vue3 自定义全局loading组件（PC和移动端都非常适用）

news2024/11/19 23:34:53

前言

在开发的过程中，点击提交按钮，或者是一些其它场景总会遇到loading加载框，PC的一些ui库也没有这样的加载框，无法满足业务需求，因此可以自己自定义一个，实现过程如下。

效果图（loading样式可以自定义）

代码实现

自定义组件 loading.vue（图片放在文末，自行右键另存为）

<template>
  <div class="loading" v-show="msg.show">
    <div class="load-box">
      <img src="@/assets/img/load.png">
      <!--<img src="@/assets/img/loading_white.png">-->
      <span>{{msg.title}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'loading',
  props: {
    msg: Object,
  }
}
</script>

<style scoped lang="scss">
.loading {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  .load-box {
    background-color: rgba(0, 0, 0, .5);
    width: 100px;height: 100px;border-radius: 5px;
    box-shadow:0px 1px 15px rgba(0,0,0, .5);color: #fff;
    display: flex;flex-direction: column;align-items: center;
    justify-content: center;letter-spacing: .8px;
    font-size: 13px;
    img{
      width: 30px;margin-bottom: 8px;
      -webkit-animation:rotate .8s linear infinite;
    }
  }
}

@keyframes rotate{
  to{
    transform: rotate(360deg);
  }
}
</style>

utils/loading.js 创建封装js控制显示和隐藏，以及需要显示的文字

import { createApp, reactive } from 'vue'

import myLoad from '@/components/Loading/loading.vue'

const msg = reactive({
  show: false,
  title: '加载中...'
})

const $loading = createApp(myLoad, {msg}).mount(document.createElement('div'))
const load = {
  show(title: any = msg.title) { // 控制显示loading的方法
    msg.show = true
    msg.title = title
    document.body.appendChild($loading.$el)
  },

  hide() { // 控制loading隐藏的方法
    msg.show = false
  }
}
export  { load }

页面使用

import { load } from '@/utils/loading.js';

// 在需要使用时调用show方法
// 例如在指定api调用，或者其他耗时操作时打开loading
// 不传参默认为 加载中...
load.show();
load.show('登录中...');

//在加载完成时关闭
load.hide();