加载中-全局加载中进度条【vue】

<template>
  <!--    微信遮着-->
  <div class="posf" @click="closeHelpLoad">
    <div class="shade" :style="{ height: wrapperHeight + 'px' }"></div>
    <div class="share-img" :style="{ height: wrapperHeight + 'px' }">
      <img src="../../../assets/images/years/load_d.gif" />
    </div>
  </div>
</template>

<script>
export default {
  name: "wechat_shade",
  data() {
    return {
      wrapperHeight: 0
    };
  },
  mounted() {
    // ..
    this.wrapperHeight = document.documentElement.clientHeight;
  },
  methods: {
    closeHelpLoad() {
      this.$emit("closeHelpLoad");
    }
  }
};
</script>

<style scoped lang="scss">
.posf {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
}
.shade {
  background-color: rgba(0, 0, 0, 0.5);
}
.share-img {
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  img {
    width: 100px;
  }
}
</style>

组件引用

<HelpReload v-show="isShowHelp" @closeHelpLoad="closeHelpLoad" />

import HelpReload from "./components/yearActivity/helpReload";
components: {

  HelpReload
},