刷新网页时,遮罩层loading的使用

//封装的方法
//关于loading加载的方法
//为了使用方便,可以创建一个js文件,把这两个方法挂载到Vue原型链上进行使用,再把js文件import到
//使用该方法的组件中就ok了
import Vue from "vue";
import {Loading} from "element-ui";


//在原型链上定义打开loading的方法
Vue.prototype.openFullScreen=function (){
    const loading = this.$loading({
        lock: true,
        text: '请耐心等待',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0)'
    });
    return loading;
}

Vue.prototype.closeFullScreen=function (){
    const loading = this.$loading({
        lock: true,
        text: '请耐心等待',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0)'
    });
    loading.close();
}

//调用

//在某页面创建时候开启

created() { this.openFullScreen(); },

//在数据请求成功/失败的时候关闭

import utils from "@/common/utils"
getUsersList() {
  getUsersList(
      this.queryInfo.query,
      this.queryInfo.pagenum,
      this.queryInfo.pagesize).then(res => {
    //console.log(res)
    console.log(JSON.stringify(res))
    console.log(JSON.stringify(this.queryInfo))
    if (res.meta.status !== 200) {
      this.closeFullScreen(this.openFullScreen());
      return this.$message.error(res.meta.msg)

    } else {
      this.userList = res.data.users
      this.total = res.data.total
      this.closeFullScreen(this.openFullScreen());
      //this.$message.success(res.meta.msg)
    }
  })
},
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值