Vue element-ui修改全局loading样式

let loadinginstace

loadinginstace = ElementUI.Loading.service({
fullscreen: true//是否全屏
        lock: true,//是否锁定全屏滚动
        text: '',//自定义文字
        spinner: 'null',//自定义图标,不填为默认的,填入不存在的找不到图标就不显示
        background: 'rgba(0, 0, 0, 0.3)',//自定义背景色
        customClass:"osloading",//自定义类名
})

引入样式

import './assets/css/test.css'

设置样式

.osloading .el-loading-spinner {//这里添加图片样式
    height: 100%;
    background: url('loading.gif') no-repeat;//引入你需要的图片
    background-size:80px 80px;
    background-position-x:48%;
}
.osloading .el-loading-spinner::after{这里写入需要的文字样式
content: 'loading...';
color: #eee;
position: relative;
top: 80px;
left: -30px;
font-size: 20px;
}

你可能感兴趣的:(vue,前端,elementui)