element-ui 中如何修改loading加载样式

异样

element-ui 中的 loading 加载功能，默认是全屏加载效果
设置局部，需要自定义样式或者修改样式，方法如下：

1. import { Loading } from 'element-ui'
   
2. Vue.prototype.$baseLoading = (text) => {
   
3.     let loading
   
4.     loading = Loading.service({
   
5.        lock: true,
   
6.        customClass: 'createLoading',  // 局部class名称
   
7.        text: text,
   
8.        spinner: 'el-icon-loading',
   
9.        background: 'rgba(0, 0, 0, 0)'
   
10.     })
    
11.   return loading
    
12. }
    
13. <style lang="scss">
    
14.   .createLoading {
    
15.     .el-loading-spinner {
    
16.       top: 50%;
    
17.       left: 50%;
    
18.       margin-left: -55px;
    
19.       background: rgba(0, 0, 0, 0.7);
    
20.       padding: 20px;
    
21.       border-radius: 4px;
    
22.       width: auto;
    
23.       text-align: center;
    
24.       position: absolute;
    
25.       i {
    
26.         color: #eee;
    
27.       }
    
28.       .el-loading-text {
    
29.         color: #eee;
    
30.       }
    
31.     }
    
32.   }
    
33. </style>

复制代码

重点：createLoading有这个局部class名字就能控制样式的修改，有时候:：v-deep在loading中不能修改样式
一些属性参数：

1. const loading = this.$loading({           // 声明一个loading对象
   
2.     lock: true,                             // 是否锁屏
   
3.     text: '加载中',                         // 加载动画的文字
   
4.     spinner: 'el-icon-loading',             // 引入的loading图标
   
5.     background: 'rgba(0, 0, 0, 0.8)',       // 背景颜色
   
6.     target: '.el-table, .table-flex, .region',  // **需要遮罩的区域，这里写要添加loading的选择器**
   
7.     fullscreen: false,
   
8.     customClass: 'loadingclass'             // **遮罩层新增类名，如果需要修改loading的样式**
   
9.   })

复制代码

到此这篇关于element-ui 中修改loading加载样式的文章就介绍到这了,更多相关element-ui 修改loading加载样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/321049nn8.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！