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 属性,我们可以控制其布尔值来达到效果。