使用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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)