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')

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

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值