有时候在项目中，我们点击按钮与后端接口交互的时候，为了防止用户频繁点击操作按钮，或者为了增加用户体验，在点击按钮之后，添加一个 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
方法三：禁用按钮。
有时候页面中的其他按钮的点击事件，例如：提交按钮。为了防止频繁点击，我们还可以在点击过后禁用该按钮，调用接口成功之后再取消按钮的禁用。
elementui中的按钮，有个 disabled 属性，我们可以控制其布尔值来达到效果。
