若依项目修改默认的loading加载图方法

::v-deep .el-loading-spinner {
  /*更改后的 gif 加载动图*/
  background-image: url('~@/assets/images/loding.gif'); 
  background-repeat: no-repeat;
  background-size: 150px 80px;
  background-position: center;
  height: 100px;
  width: 100%;
  text-align: center;
  position: absolute;
  margin-top: -20px;
  top: 40%;
}
::v-deep  .el-loading-spinner .circular {
  /*隐藏默认动画*/
  display: none;
}

::v-deep  .el-loading-spinner .el-loading-text {
  /*在loading图下面显示文字*/
  margin: 100px 0px;
  color: #0b54dd;
}

//在列表组件中添加
 <el-table :data="List" :header-cell-style="{ 'text-align': 'center' }"
 :cell-style="{ 'text-align': 'center' }"   v-loading="loading"  element-loading-text="正在加载中...">
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,关于全局的loading加载遮罩层,可以通过以下步骤实现: 1. 在页面添加一个遮罩层的html结构,用于显示loading效果,同时设置其样式为绝对定位、覆盖全屏、背景色为半透明等。 2. 利用CSS设置该遮罩层在页面加载默认为隐藏状态。 3. 在JavaScript监听所有的请求事件,当请求发起时,将遮罩层显示出来。 4. 当请求完成后,将遮罩层隐藏。同时,需要注意处理请求出错的情况,将遮罩层也同样隐藏。 下面是示例代码,供参考: HTML结构: ```html <div class="loading-mask"> <div class="loading"> <span>加载...</span> </div> </div> ``` CSS样式: ```css .loading-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; display: none; } .loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; border-radius: 4px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } ``` JavaScript代码: ```javascript // 获取遮罩层元素 var loadingMask = document.querySelector('.loading-mask'); // 监听请求事件 document.addEventListener('ajaxStart', function() { // 显示遮罩层 loadingMask.style.display = 'block'; }); // 监听请求完成事件 document.addEventListener('ajaxComplete', function() { // 隐藏遮罩层 loadingMask.style.display = 'none'; }); // 监听请求出错事件 document.addEventListener('ajaxError', function() { // 隐藏遮罩层 loadingMask.style.display = 'none'; }); ``` 以上代码在jQuery使用,如果使用其他框架或原生JavaScript,需要根据具体情况修改
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值