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

最新推荐文章于 2024-10-31 18:39:54 发布

原创最新推荐文章于 2024-10-31 18:39:54 发布 · 261 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

css 同时被 2 个专栏收录

8 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

这是一个用于微信场景的遮罩层组件，包含了阴影背景和加载动画。组件使用Vue.js编写，当需要显示加载提示时，通过v-show属性控制显示。在组件挂载后，会设置遮罩层的高度为设备窗口的高度，点击遮罩层可以触发关闭事件。样式使用了SCSS进行定义，确保元素全屏固定并居中显示加载动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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
},