vue 自定义组件：ProcessBar (堆叠式进度条)

使用vue做界面的时候需要用到类似bootstrap堆叠式进度条，前台使用ElementUI，为了防止有样式冲突，自己定义一个类似这样的进度条。

<template>
  <div id="ProcessBar" class="pB_Container">
    <div class="first" :style="error">
      {{ getProcessDesc(processValue[0]) }}
    </div>
    <div class="second" :style="cancel">
        {{ getProcessDesc(processValue[1]) }}
    </div>
    <div class="third" :style="success">
       {{ getProcessDesc(processValue[2]) }}
    </div>
    <div class="last" :style="notDone">
      {{ getProcessDesc(processValue[3]) }}
    </div>
  </div>
</template>

<script>
export default {
  name: "ProcessBar",
  props: {
    processValue: {
      type: Array,
      default: [0],
    },
  },
  data() {
    return {
      error: {
        width: this.processValue[0] + "%",
      },
      cancel: {
        width: this.processValue[1] + "%",
      },
      success: {
        width: this.processValue[2] + "%",
      },
      notDone: {
        width: this.processValue[3] + "%",
      },
    };
  },
  components: {},
  methods: {
    getProcessDesc(data) {
      return data == 0 ? " " : data + "%";
    },
  },
};
</script>
<style scoped>
.pB_Container {
  width: 100%;
  background-color: #f5f5f5;
  height: 20px;
  display: inline-flex;
  line-height: 20px;
  text-align: right;
  overflow: hidden;
  color: white;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
}
.pB_Container div {
  float: left;
  border-radius: 8px;
}
.first {
  background-color: #ea6b66;
  padding-right:10px
}
.second {
  background-color: #ffd966;
   padding-right:10px
}
.third {
  background-color: #7ea6e0;
   padding-right:10px
}
.last {
  background-color: white;
   padding-right:10px
}
</style>

在父级中引入组件 直接调用：

<template>
  <div class="pB_Container">
    <processBar v-bind="processBarModel" />
  </div>
</template>

<script>
import processBar from "../components/processPar";
export default {
  name: "Home",
   components: {
    processBar,
  },
  data() {
    return {
      processBarModel: {
        processValue: [10, 40, 20, 0]//此处是每个进度的值
      },
    };
  },
 
};
</script>

案例只设置了4级进度 ， 没有根据值的个数来循环加载进度个数，待优化。。。。