axios封装使用loading

最新推荐文章于 2024-08-16 09:19:57 发布

陌影-

最新推荐文章于 2024-08-16 09:19:57 发布

阅读量200

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/shi19970609/article/details/131942362

版权

该文展示了如何在Vue.js中创建一个自定义的loading组件，通过props传递数据，并提供了显示与隐藏的控制方法。loading组件包含一个固定定位的全屏半透明背景及加载动画，并在需要时挂载到DOM中。

摘要由CSDN通过智能技术生成

1.创建loading组件

<template>
    <div class="loading" v-show="msg.show">
        <div>
            <img src="https://img.zcool.cn/community/01a851599d4688a801201794912bf9.gif" alt="" srcset="">
        </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;
    z-index: 999;
    div {
        color: #fff;
        padding: 6px 15px;
    }
}
</style>

2.loading.js

import { createApp, reactive } from 'vue'

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

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

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

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

function closeLoading() {
    if (requestNum != 0) {
        requestNum--
        if (requestNum == 0) {
            load.hide();
        }
    }
}
function startLoading() {
    load.show()
    requestNum++
}