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 = createApp(myLoad, {msg}).mount(document.createElement('div'))
// console.log($loading);
const load = {
    show(title) { // 控制显示loading的方法
        msg.show = true
        msg.title = title
        document.body.appendChild($loading.$el)
    },

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

export default {
    install(app) {
        // console.log(app);
        // Vue.prototype.$http = axios
        app.config.globalProperties.$loading = load
    }
}

第三步 使用

在main.js中

import load from '@/components'
createApp(App).use(store).use(router).use(vant).use(load).mount('#app')

实现功能的方法永远不唯一，如果读者有别的办法欢迎分享，一起进步