element ui Loading 加载

钱哲茂
2023-12-01

Loading 加载组件化

建一个js文件Loading.js

import { Loading } from "element-ui";
let loading = null;
const showLoading = (params) => {
    if (loading) {
        loading.close()
    }
    let options = {
        fullscreen: false,
        target: document.querySelector('#mainLoad'),
        lock: true,
        text: '数据加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0,0,0,0.7)'
    }
    Object.assign(
        options,
        params
    )
    loading = Loading.service(options)
}

const hideLoading = () => {
    loading.close()
}
export {
    showLoading,
    hideLoading
}

在页面引用

import { showLoading, hideLoading } from "../Loading";

使用

      showLoading();//开启Loading遮罩层
      Action.Ajax("cloud/oms/report/handler/UpdateNode", data, (result) => {
        if (result.code == 200) {
          window.open(
            window.app.server +
              "/app?op=Preview&filename=" +
              encodeURI(result.data.path)
          );
          hideLoading();//关闭Loading遮罩层
        } else {
          console.log("请求失败");
          hideLoading();
        }
      });
 类似资料: