elementUI 页面如果需要加载很多东西的时候, 自己定义的按钮或者弹出框dialog的文字就会显示在页面上, 一闪而过, 因此需要优化一下, elementUI 提供的loading有遮罩层, 具体使用就不说了, 下面提供的是普通的处理方法,简单实用!!
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <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>123</app> </div> <!-- import Vue before Element --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- import JavaScript --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data: function () { }, //加载完成时调用 created: function () { }, //页面加载成功时完成 mounted(){ document.getElementById('app').style.display = 'block'; document.getElementById('appLoading').style.display = 'none'; }, //方法 methods: { }, }) </script> </body> </html>