Vue如何改写加载页为长尾词？

本文共计455个文字，预计阅读时间需要2分钟。

原文示例为：模板示例：简化后为：

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

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