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;
  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級進度 ， 沒有根據值的個數來循環加載進度個數，待優化。。。。