基于elementUI的loading全局加载_element loading 全局

应用场景

场景：前端在发送Ajax请求，请求后台数据时，不允许用户点击当前页面的其他按钮。

---

Loading 还可以以服务的方式调用。引入 Loading 服务

1.引入库

代码如下（示例）：

import { Loading } from 'element-ui'
1

2.定义全局loading

代码如下（示例）：

/* 全局多彩加载层 */
Vue.prototype.$baseColorfullLoading = (wer) => {
  const loading = Loading.service({ // 声明一个loading对象
    lock: true, // 是否锁屏
    text: '正在加载...', // 加载动画的文字
    spinner: 'inner-circles-loader', // 引入的loading图标
    background: 'hsla(0,0%,100%,0)', // 背景颜色
    target: document.querySelector(wer)
  })
  setTimeout(function() { // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
     loading.close() // 关闭遮罩层
   }, 2000000)
  return loading
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.使用

html标签添加标识class 或 id(在表格上加遮罩)

//添加class="todoList"
<el-table
	:data="currentTableData"
	class="todoList"
	size="small"
	style="width: 100%"
	highlight-current-row
	@row-click="handleSelectionChange">
 </el-table>

1
2
3
4
5
6
7
8
9
10

js调用

// 请求时调用
const loading = this.$baseColorfullLoading('.app-main')
//请求完成后关闭
loading.close()
1
2
3
4