使用vue实现加载页

本文实例为大家分享了用vue实现加载页的具体代码，供大家参考，具体内容如下

<template>
    <div class="bac" style="height:1024px;display: flex;align-items: center;justify-content: center;">
        <div class="wrap-content">
            <img class="logo" src="../../assets/img/logo.png" :style="{'margin-left':percent}">
            <div class="bar">
                <div :style="{width:percent}" class="loadingBar">

                </div>
            </div>
            <div class="percentFont">{{percent}}</div>
            <div class="fontTitle">报告生成中...</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "loading",
        data() {
            return{
                count: 0,
                percent:'0',
                imgs:[
                    require("@/assets/img/bg.png"),
                    require("@/assets/img/icon1.png"),
                    require('@/assets/img/icon2.png'),
                    require('@/assets/img/icon3.png'),
                    require('@/assets/img/icon4.png'),
                    require('@/assets/img/icon5.png'),
                    require('@/assets/img/icon6.png'),
                    require('@/assets/img/loading-bg.png'),
                    require('@/assets/img/logo.png'),
                    require('@/assets/img/page3-title.png'),
                    require('@/assets/img/pic1.png'),
                    require('@/assets/img/pic2.png'),
                    require('@/assets/img/pic3.png')
                 )
                ]
            }
        },
        mounted() {
            this.preload();
        },
        watch:{
            count: function (val) {

                if ( val === this.imgs.length) {
                    // 图片加载完成后跳转页面
                    console.log(" 准备就绪 >>>", val)
                    this.$router.push({path: 'index'})
                }
            }
        },
        methods:{
            preload:function () {
                for (let img of this.imgs) {
                    let image = new Image()
                    image.src = img
                    image.onload = () => {
                        this.count++
                        // 计算图片加载的百分数，绑定到percent变量
                        let percentNum = Math.floor(this.count / this.imgs.length * 100)
                        if (percentNum == 100) {
                            percentNum = 99
                        }
                        this.percent = `${percentNum}%`
                    }

                }
            }
        }
    }
</script>

<style scoped>
    .bac {
        width: 100%;
        background: url("../../assets/img/loading-bg.png") no-repeat top right;
        background-size: 100% 100%;
        overflow: hidden;
        position: relative;
    }
    .logo{
        width: 98px;
        height: 98px;
    }
    .percentFont {
        font-size: 32px;
        color: #046353;
        letter-spacing: 0.84px;
        text-align: center;
        margin-top: 32px;
    }

    .bar {
        margin-top: 50px;
        width: 300px;
        height: 8px;
        opacity: 0.8;
        background: #FFFFFF;
        border-radius: 4px;
    }

    .loadingBar {
        height: 8px;
        background-image: linear-gradient(-47deg, #046353 0%, #046353 100%);
        border-radius: 4px;
    }

    .fontTitle {
        margin-top: 12px;
        font-size: 32px;
        color: #046353;
        letter-spacing: 0.84px;
        text-align: center;
        font-weight: 400;
    }
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。