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

 更新时间:2024年05月13日 11:45:54   作者:奋斗的小鸟鸟  
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加载样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue项目发布有缓存正式环境不更新的解决方案

    vue项目发布有缓存正式环境不更新的解决方案

    vue项目每次发布新版本后,测试人员都要强制刷新才能更新浏览器代码来验证bug,下面这篇文章主要给大家介绍了关于vue项目发布有缓存正式环境不更新的解决方案,需要的朋友可以参考下
    2024-03-03
  • vue中vite.config.js配置跨域以及环境配置方式

    vue中vite.config.js配置跨域以及环境配置方式

    这篇文章主要介绍了vue中vite.config.js配置跨域以及环境配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue3使用自定义指令实现el dialog拖拽功能示例详解

    vue3使用自定义指令实现el dialog拖拽功能示例详解

    这篇文章主要为大家介绍了vue3使用自定义指令实现el dialog拖拽功能示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • vue实现拖拽窗口功能

    vue实现拖拽窗口功能

    这篇文章主要为大家详细介绍了vue实现拖拽窗口功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue中对象数组去重的实现

    vue中对象数组去重的实现

    这篇文章主要介绍了vue中对象数组去重的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • vue中渲染对象中属性时显示未定义的解决

    vue中渲染对象中属性时显示未定义的解决

    这篇文章主要介绍了vue中渲染对象中属性时显示未定义的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue 懒加载组件chunk相对路径混乱问题及解决

    vue 懒加载组件chunk相对路径混乱问题及解决

    这篇文章主要介绍了vue 懒加载组件chunk相对路径混乱问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue如何使用混合Mixins和插件开发详解

    Vue如何使用混合Mixins和插件开发详解

    这篇文章主要介绍了Vue如何使用混合Mixins和插件开发详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • vue3父子通信ref,toRef,toRefs使用实例详解

    vue3父子通信ref,toRef,toRefs使用实例详解

    这篇文章主要介绍了vue3父子通信ref,toRef,toRefs使用实例详解,分别介绍了ref是什么、toRef是什么及toRefs是什么和最佳使用方式,结合示例代码给大家讲解的非常详细,需要的朋友可以参考下
    2023-10-10
  • Vue.js实现九宫格图片展示模块

    Vue.js实现九宫格图片展示模块

    这篇文章主要为大家详细介绍了Vue.js实现九宫格图片展示模块,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10

最新评论