vue实现全局遮罩加载

通过element-plus库中的ElLoading实现全局加载。

1.创建一个loading.js实现ElLoading的封装

import {
    
     ElLoading } from 'element-plus'

let loading

export const startLoading = () => {
    
    
  loading = ElLoading.service({
    
    
    lock: true,
    text: '加载中......',
    background: 'rgba(0, 0, 0, 0.7)'
  })
}

export const endLoading = () => {
    
    
  loading.close()
}

2.引入需要的文件进行使用

import {
    
     startLoading, endLoading } from '@/utils/loading'

// 开始时使用
startLoading()

// 结束时使用
endLoading()

3.效果