本文实例为大家分享了用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.webp" :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.webp"),
require("@/assets/img/icon1.webp"),
require('@/assets/img/icon2.webp'),
require('@/assets/img/icon3.webp'),
require('@/assets/img/icon4.webp'),
require('@/assets/img/icon5.webp'),
require('@/assets/img/icon6.webp'),
require('@/assets/img/loading-bg.webp'),
require('@/assets/img/logo.webp'),
require('@/assets/img/page3-title.webp'),
require('@/assets/img/pic1.webp'),
require('@/assets/img/pic2.webp'),
require('@/assets/img/pic3.webp')
)
]
}
},
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.webp") 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>
