Hello everyone, just entered the front end of this industry, I hope to learn and progress with you! The following is a progress bar component I just wrote. Because Element’s progress bar component does not meet business requirements, I had to write a component myself. Of course this component is easy, as I’m sure you all will be, but I’ll focus on the development ideas.

The following is the progress bar required by the business:

I’ve always believed in thinking first and developing later; Think about all kinds of details first, and then gradually improve the process of development;

  1. 【 Structure 】 Divide the progress bar into left and right parts; The left side is the title, the right side is the content area;
  2. [Refinement] Refine the content area and divide the content into two parts, progress bar and value section
  3. 【 Deep decomposition 】 The numerical area is composed of numbers and units, and needs props to pass values; The progress bar has two different manifestations, which can be judged by using Booleans Boolean value.
  4. [Calculation] Calculate the position of the progress bar according to the incoming reference value;

Here’s the code: Just for sharing

HTML part

<template>
  <div :style="{width:_width + 'px'}" class="progress-bar"> /* First progress bar format */ <div v-if="isTip" class="progress-bar__tip">
      <span :style="barStyle" class="progress-bar_line"/> </div> /* Second progress bar format */ <div v-if=! "" isTip" class="progress-bar_tip2">
      <div style="width:100%; height:100%; display:flex;">
        <div style="background: #5188ff; width:20%; height:100%"/>
        <div style="background: #48a74f; width:60%; height:100%"/>
        <div style="background: #f44336; width:20%; height:100%"/>
      </div>
      <div :style="barStyle2" class="square"/>
      <div :style="barStyle2" class="square2"/> </div> /* Numeric part */ <div style="width: 30%; margin-left:5px"><div class="progress-bar__tiptext">{{ dataValue + unit }}</div></div>
  </div>
</template>
Copy the code

Script part

<script>
export default {
  props: {
    dataValue: {
      type: Number,
      default: 80
    },
    standard: {
      type: Number,
      default: 100
    },
    unit: {
      type: String,
      default: ' '
    },
    _width: {
      type: Number,
      default: 220
    },
    isTip: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    barStyle() {
      const style = {}
      style.width = (this.dataValue / this.standard) * 100 + The '%'
      return style
    },
    barStyle2() {const style = {} style.left = (this.datavalue/this.standard) * this._width * 0.7-4 +'px'
      return style
    }
  }
}
</script>
Copy the code

I hope you can give me some advice!