使用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>

来源：https://blog.csdn.net/weixin_43444977/article/details/123049004