目录

element-ui 中修改loading加载样式

element-ui 中的 loading 加载功能,默认是全屏加载效果

设置局部,需要自定义样式或者修改样式,方法如下:

javascript 复制代码
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中不能修改样式

一些属性参数:

javascript 复制代码
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的样式**
  })
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
霸王蟹26 分钟前
Webpack中loader的作用。
前端·javascript·vue.js·笔记·webpack·node.js
哟哟耶耶3 小时前
React-04React组件状态(state),构造器初始化state以及数据读取,添加点击事件并更改state状态值
前端·javascript·react.js
kiramario4 小时前
用IconContext.Provider修改react-icons的icon样式
前端·javascript·react.js
destinyol4 小时前
React首页加载速度优化
前端·javascript·react.js·webpack·前端框架
程序员小续4 小时前
React 多个 HOC 嵌套太深,会带来哪些隐患?
java·前端·javascript·vue.js·python·react.js·webpack
致微5 小时前
Vue项目 bug 解决
前端·vue.js·bug
慕斯策划一场流浪5 小时前
fastGPT—nextjs—mongoose—团队管理之部门相关api接口实现
前端·javascript·html·fastgpt部门创建·fastgpt团队管理·fastgpt部门成员更新·fastgpt部门成员创建
我自纵横20236 小时前
事件处理程序
开发语言·前端·javascript·css·json·ecmascript
拉不动的猪7 小时前
刷刷题50(vue3)
前端·javascript·面试
ZSK68 小时前
【HTML】分享一个自己写的3*3拼图小游戏
前端·javascript·html