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

最新推荐文章于 2024-07-01 18:01:31 发布

原创最新推荐文章于 2024-07-01 18:01:31 发布 · 806 阅读

CC 4.0 BY-SA版权

本文介绍了如何在Vue项目中使用Element-UI的Loading组件，提供openFullScreen和closeFullScreen方法，并将其挂载到Vue原型链上，便于在组件间轻松控制加载状态。

//封装的方法
//关于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)
    }
  })
},