vue项目未加载完成前显示loading...

1.在Index.html里面加入loading的元素，让loading元素显示，让app元素隐藏<!DOCTYPE html><html><head><meta charset="utf-8"><title>Demo</title><link rel="ico...

weixin_33859504

8911人浏览 · 2018-11-29 15:29:00

weixin_33859504 · 2018-11-29 15:29:00 发布

1.在Index.html里面加入loading的元素，让loading元素显示，让app元素隐藏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <link rel="icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon">
    <style media="screen" type="text/css">
       #appLoading { width: 100%; height: 100%; }
       #appLoading span {
            position: absolute;
            display: block;
            font-size: 50px;
            line-height: 50px;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 100px;
            -webkit-transform: translateY(-50%)  translateX(-50%);
            transform: translateY(-50%)  translateX(-50%);
        }
    </style>
  </head>
  <body>
    <div id="appLoading">
       <span>Loading...</span>
    </div>
    <div id="app" style="display: none">
       <app></app>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

2.在App.vue中加入：加载完成之后，让loading隐藏，让app元素显示

 mounted(){
        document.getElementById('app').style.display = 'block';
        document.getElementById('appLoading').style.display = 'none';
 }

3. 原理

在文档开始加载的时候显示loading

在js加载完毕后，显示app

转载于:https://www.cnblogs.com/cengjingdeshuige/p/10038621.html

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^