vue3使用js封装全局loading

第一步

• 在components文件夹中新建myLoad.vue组件

<template>
    <div class="loading" v-show="msg.show">
        <div>{
  {msg.title}}</div>
    </div>
</template>

<script>
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;
    div {
        background-color: rgba(0, 0, 0, 0.8);
        color: #fff;
        padding: 6px 15px;
    }
}
</style>

第二步

新建一个index.js文件

import { createApp, reactive } from 'vue'

import myLoad from './myLoading/myLoad'

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

const $loading &