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();//關閉加載動畫 }); }, ```