VUE前端按钮添加遮罩层

需求

当前需求是由于部分按钮操作的执行时间过长，因此添加遮罩层，防止用户误操作。

实现方式

在请求接口时创建遮罩层，并将遮罩层保存为全局唯一，请求成功或失败时，关闭遮罩层即可，切记，请求失败时一定要记得关闭。

公共方法

遮罩层的样式可自定义修改

// loading.js

import { Loading } from 'element-ui';

import store from '@/store/index.js';

/**

 * 展示遮罩层

 * @param {*} text 遮罩层显示的文本信息

 */

export const showLoading = (text) => {

    // 先进行关闭

    hideLoading()

    // 创建遮罩层

    let loadingInstance = Loading.service(

        {

            text : text,

            lock: true,

            spinner: 'el-icon-loading',

            background: 'rgba(0, 0, 0, 0.7)'

        }

    );

    // 定义全局

    store.commit("SET_LOADING_INSTANCE", loadingInstance);

}

/**

 * 隐藏遮罩层

 */

export const hideLoading = () => {

    // 隐藏 loading 的逻辑

    let loadingInstance = store.getters.loadingInstance

    if (loadingInstance && loadingInstance != null) {

        loadingInstance.close();

        store.commit("SET_LOADING_INSTANCE", null);

    }

}

调用方式

import  {showLoading, hideLoading} from "@/util/loading";

      // 在需要的地方去调用

      // 弹出遮罩层

        showLoading("loading")

        发送请求.then(res =>{

          this.$message({

            type: "success",

            message: res.data.msg

          });

          hideLoading()

          // 刷新界面

          this.handleRefresh()

        })