vue封装堆叠式进度条

Posted 2021-06-02 晚星@

效果图

代码

App.vue

<processBar :processValue="processValue1"/>

<script>
import processBar from './components/ProcessBar'
export default {
  name: 'App',
  components: {
    processBar
  },
  data () {
    return {
      processValue1: [
        {
          name: '乙烯',
          color: '#3EA4F7',
          data: 30494
        },
        {
          name: '丁二烯',
          color: '#AAD9F7',
          data: 3585
        },
        {
          name: '化工苯',
          color: '#23628D',
          data: 7615
        },
        {
          name: '对二甲苯',
          color: '#5EBAF8',
          data: 12881
        },
        {
          name: '苯乙烯',
          color: '#2D7AB8',
          data: 6696
        }
      ],
    }
  },
  methods: {}
}
</script>

在组件中ProcessBar中

<template>
  <div>
    <div id="ProcessBar" class="pB_Container">
      <!--   封装遍历-->
      <div v-for="(item,index) in processArray" :key="index"
           :style="{ width:item.data+'%',backgroundColor:item.color,paddingLeft:10+'px'}"></div>
    </div>
    <div class="pB_Container_bottom">
      <ul>
        <li v-for="(item,index) in processArray" :key="index">
          <span style="display:inline-block;width:10px;height: 10px;" :style="{backgroundColor: item.color}"></span>
          <span>{{item.name}}</span>
          <span class="data">{{item.data}}</span>
        </li>
        <li></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProcessBar',
  props: {
    processValue: {
      type: Array,
      default: [0],
    },
  },
  data () {
    return {
      dataSum: 0,
      processArray: []
    }
  },
  components: {},
  created () {
    this.processValue.forEach(item => {
      this.dataSum += item.data
    })
    this.processArray = this.processValue.map(items => {
      return {data: Math.round(((items.data / this.dataSum) * 100)), color: items.color, name: items.name}
    })
    console.log(this.processArray)
  },
  methods: {
    getProcessDesc (data) {
      return data == 0 ? ' ' : data + '%'
    },
  },
}
</script>
<style scoped>
  .pB_Container {
    width: 100%;
    background-color: #f5f5f5;
    height: 10px;
    display: inline-flex;
    line-height: 10px;
    overflow: hidden;
    color: white;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
  }

  .pB_Container div {
    float: left;
    /*border-radius: 8px;*/
  }

  .pB_Container_bottom ul {
    list-style: none;
    text-align: left;
  }
  .pB_Container_bottom ul li{
    float: left;
    display: inline-block;
    width:33%
  }
  .data{
    display: inline-block;
    float:right;padding-right: 10%;
    color: #FFDE00;
    font-weight: 700;
    font-size: 16px;
  }
</style>

最终实现效果