vue封装项目全局暂无数据遮罩，加载中loading等公共方法，超实用

效果：

image.png

image.png

public.js

export default {
  install(Vue) {
    Vue.mixin({
      methods: {
        noData(id, cssText = "") {
          let el = document.getElementById(id);
          //兼容ref获取组件
          if (!el) {
            let ref = this.$refs[id];
            if (!ref) {
              return;
            }
            if (Object.prototype.hasOwnProperty.call(ref, "$el")) {
              el = ref.$el;
            } else {
              el = ref;
            }
          }
          el.innerHTML = "";
          let node = document.createElement("div");
          node.className = "noData";
          node.innerText = "暂无数据";
          node.style.cssText += ";" + cssText;
          el.appendChild(node);
        },
        echartsLoading(refName) {
          this.$refs[refName].chartObj.showLoading({
            text: "正在加载",
            color: "#c23531",
            textColor: "#6ebdff",
            maskColor: "#1e294d",
          });
        },
        moduleLoading(fatherClass = "loadbox", showLoad = true) {  // 各个盒子最好叫不一样的名字，避免一个请求结束关闭了其他盒子的loading
          let father = document.getElementsByClassName(fatherClass);
         //   console.log(999,father2)
          father.forEach(item=>{
            item.style.cssText += "position:relative;";
            let ifloadMask=item.getElementsByClassName('loadMask')[0]
            // console.log(999,ifloadMask)
            if(!ifloadMask){
              let node = document.createElement("div");
              node.className = "loadMask";
              item.appendChild(node);
              ifloadMask=item.getElementsByClassName('loadMask')[0]
            }
            if(showLoad==true){
                ifloadMask.style.cssText = "display:show;"
            }else{
                ifloadMask.style.cssText = "display:none;"
            }
          })
       
        }
      },
      destroyed() {
        this.$bus.$off("refresh");
      },
    });
  },
};

css less

/*----暂无数据样式 START--------*/
.noData{
  width: 94%;
  height: 100%;
  background: url(~@/assets/images/manage/nodata_dark.png) no-repeat;
  background-size: 100% 100%;
  font-size: 1.4rem;
  color: rgb(111, 189, 255);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-table__empty-block{
  background: url(~@/assets/images/manage/nodata_dark.png) no-repeat;
  background-size: 100% 100%;
  .el-table__empty-text{
    font-size: 1.4rem;
    color: rgb(111, 189, 255);
  }
}
.loadMask{
  width: 100%;
  height: 100%;
  background: url(~@/assets/images/manage/loading.gif) center center no-repeat #1e294d;
  background-size: 8rem 2.48rem;
  font-size: 1.4rem;
  color: rgb(111, 189, 255);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}
/*----暂无数据样式 END--------*/

main.js

import Mixin from "./scripts/mixin";
Vue.use(Mixin);

使用方法：

以某个数据请求为例

getData(){
            this.tableData=[]
            const params={
                orgid: this.orgId,   // 企业id  orgId来自混入
                pageNum: 1,
                pageSize: 6,
            }

            this.moduleLoading('loadbox_alarm')

            this.$api.Manage.getAlarmList(params).then(res => { 
                this.tableData=res.data.slice(0,6) || []
            }).finally(()=>{
                this.moduleLoading('loadbox_alarm',false)
            })
// 因为这里是表格 ，我已经改写了表格的暂无数据样式，所里没必要调用nodata方法

        },

再看个例子

this.moduleLoading('loadbox_work')  // 开启loading
this.$api.Manage.getWorkrTotal(params).then(res => { 
                this.totalNum=res.data.totalNum||'-'
                this.workList=res.data.list|| []
                if(this.workList.length==0){  // 暂无数据
                    this.noData('workchart',"height:95%;")
                }else{
                    this.initCharts()
                }
            }).catch(()=>{
                this.noData('workchart',"height:95%;")
            }).finally(()=>{
                this.moduleLoading('loadbox_work', false) // 关闭loading
            })