VUE3（三十九）自定义loading组件~

我使用的比较多的是阿里的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();

最终效果我这里就不做展示了，有兴趣可以自己尝试一下。

有好的建议，请在下方输入您的评论。