vue实现loading

使用实现：
loading图标

<template>
    <teleport to="#loadingMask">
        <section class="mask loading-container" v-show="loadingStatus">

            <div class="loading-icon spinner-border text-primary" role="status">
                <span class="sr-only">Loading...</span>
            </div>

        </section>
    </teleport>
</template>

<script lang="ts">
    import {Options, Vue} from "vue-class-component";
    import {loadingModule} from "@/store/modules/Loading";

    @Options({})
    export default class Loading extends Vue {
        loadingModule = loadingModule;
        get loadingStatus() {
            return loadingModule.loadingStatus;
        }
        mounted() {
            setTimeout(()=>{
                loadingModule.setLoading(true)
            },3000)
            setTimeout(()=>{
                loadingModule.setLoading(false);
            },10000)
        }
    }
</script>

<style scoped lang="scss">
    @import "@/assets/style/layout.scss";
    .mask {
        @include flex-row;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .loading-container {
        background: rgb(255,255,255,.5);
        position: fixed;
        z-index:100;
        width: 100%;
        height: 100%;
        text-align: center;
        left: 0;
        top: 0;
    }
</style>

修改添加文字

<template>
    <teleport to="#loadingMask">
        <section class="mask loading-container" v-show="loadingStatus">

           <section class="loading-content">
               <div class="loading-icon spinner-border text-primary" role="status">
                   <span class="sr-only">拼命加载中...</span>
               </div>
               <p class="text-primary small">拼命加载中</p>
           </section>

        </section>
    </teleport>
</template>

<script lang="ts">
    import {Options, Vue} from "vue-class-component";
    import {loadingModule} from "@/store/modules/Loading";

    @Options({})
    export default class Loading extends Vue {

        get loadingStatus() {
            return loadingModule.loadingStatus;
        }



    }
</script>

<style scoped lang="scss">
    @import "@/assets/style/layout.scss";
    .mask {
        @include flex-row;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .loading-container {
        background: rgb(255,255,255,.5);
        z-index:100;
        position: fixed;
        width: 100%;
        height: 100%;
        text-align: center;
        left: 0;
        top: 0;
    }
</style>

最后

以上就是舒心斑马为你收集整理的vue实现loading的全部内容，希望文章能够帮你解决vue实现loading所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。