app內嵌h5簡單loading組件實現

 由於之前在使用mint-ui時，loading無法使用，最后沒有辦法只能自己寫一個簡單loading組件進行使用，代碼如下：

<template>
<div id="mark-bg">
    <div class="container">
        <div class="loading-bg">
            <img class="loading-icon" src="../assets/images/loading3.gif" alt="">
            <span class="loading-tip">加載中</span>
        </div>
    </div>
</div>
</template>
<script>
export default {
    name: 'apploading',
    data () {
        return {

        }
    }
}
</script>

<style>
   #mark-bg{
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        z-index: 1000;
    }

    .container {
        width: 30vw;
        height: 30vw;
        z-index: 1000;
        display: inline-block;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        background:#000;
        border-radius: 5vw;
        opacity: 0.6;
        transform: translate(-50%, -50%);
    }
    .loading-bg{
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .loading-icon {
        width: 10vw;
        height: 10vw;
        display:inline-block;
        margin-top: -8vw; 
    }
    .loading-tip {
        display: inline-block;
        font-size: 4vw;
        color: #fff;
        position: absolute;
        bottom: 5vw;
       
    }
</style>

在使用過程中可能會發現在遮罩層出現的同時后面的頁面還能繼續滑動，如果有相應的解決辦法，可以自行添加。