使用vue实现加载页

作者:歌声缓缓 时间:2024-05-03 15:11:37 

本文实例为大家分享了用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

标签:vue,加载页
0
投稿

猜你喜欢

  • Ubuntu18.0.4下mysql 8.0.20 安装配置方法图文教程

    2024-01-21 07:10:03
  • 解读tf.keras.layers模块中的函数

    2023-04-02 04:26:29
  • python如何将图片转换素描画

    2022-05-26 23:17:49
  • pytorch: Parameter 的数据结构实例

    2022-10-19 22:28:22
  • mysql alter语句用法实例

    2024-01-25 12:32:53
  • 运用python去除图片水印

    2021-05-06 10:54:20
  • 关于PyTorch中nn.Module类的简介

    2023-03-19 13:31:15
  • PyTorch搭建LSTM实现时间序列负荷预测

    2023-08-18 09:10:09
  • Python堆排序原理与实现方法详解

    2021-02-22 15:07:31
  • js判断手机和pc端选择不同执行事件的方法

    2024-04-29 13:45:46
  • MySQL的安全问题从安装开始说起

    2024-01-14 05:11:24
  • 深入理解python中sort()与sorted()的区别

    2021-08-17 11:46:49
  • python实现简单日志记录库glog的使用

    2023-01-07 23:14:40
  • np.array()函数的使用方法

    2022-07-08 08:21:05
  • python 如何求N的阶乘

    2023-11-01 15:24:46
  • Vue实现图片轮播组件思路及实例解析

    2023-07-02 17:02:02
  • php+mysqli使用面向对象方式更新数据库实例

    2023-06-23 00:30:23
  • python 根据网易云歌曲的ID 直接下载歌曲的实例

    2021-01-15 19:48:47
  • Python文件读写w+和r+区别解析

    2022-01-12 04:23:04
  • 详解基于Transformer实现电影评论星级分类任务

    2022-01-08 20:31:23
  • asp之家 网络编程 m.aspxhome.com