vue封装进度条组件

swagLi

已于 2022-06-06 10:31:54 修改

阅读量1.8k

点赞数

分类专栏： vue、elementUI、音视频通信、echarts实战文章标签： vue.js javascript 前端

于 2021-11-15 15:10:34 首次发布

本文链接：https://blog.csdn.net/qq_41149508/article/details/121334899

版权

vue、elementUI、音视频通信、echarts实战专栏收录该内容

25 篇文章 43 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文档介绍了如何在Vue.js中封装一个进度条组件，包括组件的创建过程、使用方法以及展示的效果图。

摘要由CSDN通过智能技术生成

一、组件封装 components/progress.vue

<template>
  <div class="process-father" :class="{'addGray':addGray}" >
    <div class="process-child" ref="processChild">
      <p class="process-animate" :class="{'addGray':addGray}"></p>
    </div>
  </div>
</template>
 
<script>
export default {
  props: {
    addGray: { //改变进度条颜色
      type: Boolean,
      default: false
    },
    progressWidth: {
      //进度条百分比
      type: String,
      default: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.processChild.style.width = this.progressWidth + "%";  //动态改变进度
    });
  }
};
</script>
 
<style la