1.指令方式 ``` 案例：在上传组件中添加加载动画 <upload v-if="uploadFileDialog" v-loading.fullscreen.lock="loading" //是否加载 element-loading-text="上传中..." //加载显示文字 element-loading-spinner="el-icon-loading" //图标 element-loading-background="rgba(0,0,0,.1)" //背景颜色 :filesNumber="1" :fileAction="fileAction" :fileList="fileList" title="附件上传" @uploadSuccess="uploadSuccess" @uploadFailed="uploadFailed" @beforeUpload="beforeUpload" ></upload> //文件上传前，打开动画，上传成功或失败关闭动画 beforeUpload() { this.loading = true; }, uploadSuccess(id, fileList) { this.uploadFileDialog = false; this.loading = false; this.attachmentData(); this.getDocLog(2); }, uploadFailed() { this.loading = false; this.uploadFileDialog = false; this.attachmentData(); }, ``` 2.服务方式 ``` 案例：在表格中下载文件，下载过程中间显示加载动画，下载完成关闭 // 下载方法 download(id) { //加载动画 const loadingObj = this.$loading({ lock: true, text: "下载中...", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", target: document.body, //显示的区域 }); docFileDownload(id) .then((res) => { this.$message({ message: "下载成功", type: "success", }); loadingObj.close();//关闭加载动画 }) .catch(() => { loadingObj.close();//关闭加载动画 }); }, ```