Vue element-ui修改全局loading样式

let loadinginstaceloadinginstace = ElementUI.Loading.service({fullscreen: true//是否全屏lock: true,//是否锁定全屏滚动text: '',//自定义文字spinner: 'null',//自定义图标，不填为默认的，填入不存在的找不到图标就不显示background: 'rgba(0, 0, 0, 0.3)',

weixin_44426872

3037人浏览 · 2021-06-29 09:57:36

weixin_44426872 · 2021-06-29 09:57:36 发布

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;
}