vue添加全局的 loading 加载图标，或者点击按钮之后禁用按钮

有时候在项目中，我们点击按钮与后端接口交互的时候，为了防止用户频繁点击操作按钮，或者为了增加用户体验，在点击按钮之后，添加一个 loading 图标，等请求成功之后，再关闭 loading 。

方法一：在我们的vue文件或者vue组件中methods中添加全局加载的 loading 方法。

methods:{
  //全局加载loading图标
  openLoading(){
    const loading = this.$loading({         // 声明一个loading对象       
      lock: true,                           // 是否锁屏
      fullScreen: true,                     //是否为全屏 Dialog
      background: "rgba(255,255,255,0.7)"   //遮罩背景色
    })
    setTimeout(function () {                // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
      loading.close();                      // 关闭遮罩层
    },5000)
    return loading;
  },
  /**
   * 比如我们页面中有一个“保存”的按钮，点击按钮需要保存数据
   */
  //保存按钮的点击事件
  saveBtnClick(){
    const pageLoading = this.openLoading(); //调用方法，打开loading遮罩层
    let params = {
      //在这里定义参数
    }
    axios.post(url,params)  //axios的post方法，url为后端接口地址，params为参数
      .then(res=>{
        if(res.code==200){  //这里的判断条件根据接口数据而定
          pageLoading.close(); //请求成功之后就关闭遮罩层
          this.$message.success({
            message:"保存成功！"
          })
        }           
      });
  }
}

方法二：全局注册

在main.js中添加，如下：

Vue.prototype.myLoading = function () {
  const loading = this.$loading({
    lock: true,
    text: "Loading",
    spinner: "el-icon-loading",
    background: "rgba(0, 0, 0, 0.7)",
  });
  return loading;
}

在vue 的文件中使用：

//开始loading
const loading = this.myLoading();

//在某些操作之后，关闭loading
loading.close();

 

方法三：禁用按钮。

　　有时候页面中的其他按钮的点击事件，例如：提交按钮。为了防止频繁点击，我们还可以在点击过后禁用该按钮，调用接口成功之后再取消按钮的禁用。

　　elementui中的按钮，有个 disabled 属性，我们可以控制其布尔值来达到效果。