element-ui 中的 loading 加载功能,默认是全屏加载效果,
设置局部,需要自定义样式,自定义的方法如下:
import { Loading } from 'element-ui'
Vue.prototype.$baseLoading = (text) => {
let loading
loading = Loading.service({
lock: true,
customClass: 'createLoading', // 局部class名称
text: text,
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0)'
})
return loading
}
<style lang="scss">
.createLoading {
.el-loading-spinner {
top: 50%;
left: 50%;
margin-left: -55px;
background: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 4px;
width: auto;
text-align: center;
position: absolute;
i {
color: #eee;
}
.el-loading-text {
color: #eee;
}
}
}
</style>