element-ui 中如何修改loading加载样式
作者：奋斗的小鸟鸟
element-ui 中的 loading 加载功能,默认是全屏加载效果,设置局部,需要自定义样式或者修改样式,下面给大家分享实例代码,感兴趣的朋友跟随小编一起看看吧
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>重点：createLoading有这个局部class名字就能控制样式的修改，有时候:：v-deep在loading中不能修改样式
一些属性参数：
const loading = this.$loading({ // 声明一个loading对象
lock: true, // 是否锁屏
text: '加载中', // 加载动画的文字
spinner: 'el-icon-loading', // 引入的loading图标
background: 'rgba(0, 0, 0, 0.8)', // 背景颜色
target: '.el-table, .table-flex, .region', // **需要遮罩的区域，这里写要添加loading的选择器**
fullscreen: false,
customClass: 'loadingclass' // **遮罩层新增类名，如果需要修改loading的样式**
})到此这篇关于element-ui 中修改loading加载样式的文章就介绍到这了,更多相关element-ui 修改loading加载样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！