基于Element的进度条Loading

基于Element的进度条loading组件

前端在中后台项目开发中经常要使用到loading遮罩层在数据交互时展示,目前我使用element组件库的loading,发现不能自定义,loading的样式比较少,官方只提供修改loading的图标和文字。

但是我的需求是希望展示的是进度条一样的效果,那就不用loading组件,使用element的Progress进度条组件,自己写一个。

代码如下。组件的api可以自行添加

javascript 复制代码
<template>
    <div class="loadingModal" :style="{'height':fatherHeight+'px'}" v-if="progressLoading">
        <el-progress
            :style="{width:'20%',margin:'0 auto',marginTop:`${fatherHeight*0.3}px`}"
            :type="type"
            :width="70"
            :text-inside="true"
            :stroke-width="type?undefined:strokeWidth"
            :percentage="percentage"
            :color="colors"
            :show-text="showText"
            :status="percentage === 100?undefined:'success'"
        ></el-progress>
    </div>
</template>
<script>
/**
 * @file progress.vue
 * @author yahooJ
 * @creatdate 2020-08-19
 * @update 2020-08-20
 */
export default {
  data() {
    return {
      percentage: 0,
      timeStart: 0,
      fatherHeight: 0, // 父级元素高度
      colors: [
        { color: "#1989fa", percentage: 99 },
        { color: "#2BD176", percentage: 100 },
      ],
      progressLoading: false,
    };
  },
  props: {
    strokeWidth: {
      type: Number,
      default: () => {
        return this.type ? undefined : 24;
      },
    },
    showText: {
      type: Boolean,
      default: true,
    },
    // 进度条状态
    type: {
      type: String,
      default: () => {
        return undefined;
      },
    },
    // 显示状态
    loading: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    // 获取父级元素的高度,使组件高度与父元素高度相同
    // 相对于父元素定位
    this.$el.parentNode.style.position = "relative";
  },
  computed: {},
  methods: {
    // 进度条开始
    start() {
      const that = this;
      that.fatherHeight = this.$el.parentNode.offsetHeight;
      that.$nextTick(() => {
        that.progressLoading = true;
        that.percentage = 0;
        that.timeStart = setInterval(() => {
          if (that.percentage < 95) {
            that.percentage += 5;
          }
        }, 100);
      });
    },
    // 进度条结束
    end() {
      const that = this;
      that.percentage = 100;
      clearInterval(this.timeStart);
      setTimeout(() => {
        that.progressLoading = false;
      }, 300);
    },
  },
  watch: {
    // 监听loading状态控制进度条显示
    loading(value, newValue) {
      const that = this;
      if (value) {
        that.start();
      } else {
        that.end();
      }
    },
  },
};
</script>
<style >
.loadingModal {
  height: var(height);
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999;
}
</style>

使用方式:

在需要遮罩的元素内放入即可,接收loading参数控制是否展示,展示时会覆盖父级元素

相关推荐
blammmp26 分钟前
Java:数据结构-枚举
java·开发语言·数据结构
何曾参静谧39 分钟前
「C/C++」C/C++ 指针篇 之 指针运算
c语言·开发语言·c++
暗黑起源喵1 小时前
设计模式-工厂设计模式
java·开发语言·设计模式
WaaTong1 小时前
Java反射
java·开发语言·反射
Troc_wangpeng1 小时前
R language 关于二维平面直角坐标系的制作
开发语言·机器学习
王哲晓1 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
努力的家伙是不讨厌的1 小时前
解析json导出csv或者直接入库
开发语言·python·json
理想不理想v1 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
Envyᥫᩣ1 小时前
C#语言:从入门到精通
开发语言·c#
酷酷的阿云1 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js