Custom steps vue bar assembly (CSS)

Man of few words said, directly on the component code. .

<template>
  <div>
    <ul class="steps">
      <li
        v-for="(item,index) in SetData"
        :key="item+index"
        :class="{'active':Steps===index}"
      >{{item+Steps}}</li>
    </ul>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import axios from "axios";
@Component
export default class Steps extends Vue {
  @Prop({default:0}) private Steps!: number;
  @Prop () Private the SetData 
.steps li: before {! : String []; 
}
 </ Script> 

<style> 
.steps { 
  position: relative; 
  margin - bottom: 30px; 
  counter -reset: STEP; / * the step of creating a digital counter * / 
} 
/ * procedure described for * / 
.steps {Li 
  List -style- type: none; 
  font - size: 12px; 
  text - align = left: Center; 
  width: 15% ; 
  position: relative; 
  a float : left; 
} 

/ * step digital * / 
  the display: Block; 
  Content: counter ( step);/ * Set the contents of the counter * / 
  counter -Increment: the STEP; / * counter value is incremented * / 
  width: 32px; 
  height: 32px; 
  background -color: # 019 875 ; 
  Line - height: 32px; 
  border - the RADIUS: 32px; 
  font - size: 16px; 
  Color: #fff; 
  text - align = left: Center; 
  font -weight: 700 ; 
  margin: 0 Auto Auto 8px; 
} 

/ * cable * / 
.steps Li ~ Li: After { 
  Content: "" ; 
  width: 100% ; 
  height: 2px; 
  background -color: # 019 875 ; 
  position: Absolute; 
  left: -50% ; 
  Top: 15px; 
  Z -index: -1; / * placed in the digital behind * / 
} 

/ * before the current / step numbers and complete cable green * / 
.steps li.active:before, 
.steps li.active:after { 
  background -color: # 019 875 ; 
} 

/ * current / after completion of the step of the digital cable and grayed out * / 
.steps li.active ~ Li: before, 
.steps li.active ~ Li: after { 
  background -color: # 777 ; 
}
</style>

Calling component. . .

<template>
  <div>
    {{num1}}
    <el-button type="warning" @click="getNumber">get a random number</el-button>
    <Steps :Steps="registSpets" :SetData="SetData" />
    <el-button type="primary" @click="registSpets++">+++</el-button>
    {{registSpets}}
    <el-button type="danger" @click="registSpets--">---</el-button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import Steps from "../components/Steps.vue";
@Component({
  components: {
    Steps
  }
})
export defaultVue {the extends the Input class 
  num1: Number The = 0 ; 
  registSpets = 1 ; 
  SetData = [ "User Information", "Les Enfants us", "Monkey King", "barefoot", "I love China" ]; 
  getNumber () { 
    the this .num1 = Math.ceil (Math.random () * 10); // Matg.ceil ceil 
  } 
}
 </ Script>

Results are as follows:

Original Reference: https://blog.csdn.net/xqq580231/article/details/78086173