• elementUI vue 页面加载的时候页面出现了黑字 页面优化处理 按钮弹出框文字


    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>
  • 相关阅读:
    网站后台编辑器怎样才能兼容IE6、IE8
    map area
    纯CSS圆角
    【转】Linux 查看某一进程的占用CPU的Cacti 脚本
    查看/修改Linux时区和时间,更新系统时间
    Centos下安装X Window+GNOME Desktop+FreeNX
    rhel6 kvm做桥接
    Gentoo网络配置
    常用正则表达式
    VS 设置备忘
  • 原文地址:https://www.cnblogs.com/yysbolg/p/9874886.html
Copyright © 2020-2023  润新知