VUE+ElementUI 实现Loading

因为做了个文件上传的功能，在文件上传过程中需要实现遮罩，等待文件上传成功之后才允许继续操作。

为了不影响页面的菜单，只控制文件上传部分，所以需要增加一个局部的loading。

需要给哪个部分加loading，就在哪个部分的标签区域用v-loading标签，这里我在文件上传upload组件外包了一层div：

<div class="container" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)" element-loading-text="请稍等，文件正在上传中…">

element-loading-text="拼命加载中"  设置loading文字

element-loading-background="rgba(0, 0, 0, 0.5)" 设置loading背景

element-loading-spinner="el-icon-loading" 设置loading图标
 

其他的写法:

const loading = this.$loading({           // 声明一个loading对象
    lock: true,                             // 是否锁屏
    text: '正在加载...',                     // 加载动画的文字
    spinner: 'el-icon-loading',             // 引入的loading图标
    background: 'rgba(0, 0, 0, 0.3)',       // 背景颜色
    target: '.sub-main',                    // 需要遮罩的区域
    body: true,                              
    customClass: 'mask'                     // 遮罩层新增类名
  })