VUE项目学习（六）：自定义间隔进度条

网上有很多种进度条，但是我没找到这种间隔进度条，索性自己弄一个

1、进度条演示：

2、VUE代码展示

template代码：

<div class="progressbar">
    <div class="title">
      <span>自定义进度条:</span>
    </div>
    <div class="progress">
       <div class="greenblock" v-for="(index, i) in success" :key="i"></div>
       <div class="greyblock" v-for="(index, i) in failed" :key="i"></div>
    </div>
    <div class="show">
      <span>{{success}}</span>
    </div>
    <div class="edit">
      <button @click="add()">增加</button>
      <button @click="mul()">减少</button>
    </div>
  </div>

script代码

export default {
  name: 'progressbar',
  data () {
    return {
      amount: 50,
      success: 24,
      failed: 26
    }
  },
  methods: {
    add: function(){
      if(this.success != this.amount){
        this.success = this.success + 1
        this.failed = this.failed - 1
      }
    },
    mul: function(){
      if(this.failed != this.amount){
        this.success = this.success - 1
        this.failed = this.failed + 1
      }
    }
  }
}

css代码

.progressbar{
  margin-top: 10px;
  margin-left: 10px;
}
.title{
  width: 140px;
  height: 20px;
  float: left;
}
.progress{
  width: 500px;
  height: 20px;
  margin-top: 4px;
  float: left;
}
.show{
  width: 100px;
  height: 20px;
  float: left;
  text-align: center;
}
.edit{
  width: 100px;
  height: 20px;
  float: left;
}
.greenblock{
  width: 6px;
  height: 20px;
  margin-left: 4px;
  float: left;
  background-color: limegreen;
}
.greyblock{
  width: 6px;
  height: 20px;
  margin-left: 4px;
  float: left;
  background-color: gainsboro;
}

完整代码为：

<template>
  <div class="progressbar">
    <div class="title">
      <span>自定义进度条:</span>
    </div>
    <div class="progress">
       <div class="greenblock" v-for="(index, i) in success" :key="i"></div>
       <div class="greyblock" v-for="(index, i) in failed" :key="i"></div>
    </div>
    <div class="show">
      <span>{{success}}</span>
    </div>
    <div class="edit">
      <button @click="add()">增加</button>
      <button @click="mul()">减少</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'progressbar',
  data () {
    return {
      amount: 50,
      success: 24,
      failed: 26
    }
  },
  methods: {
    add: function(){
      if(this.success != this.amount){
        this.success = this.success + 1
        this.failed = this.failed - 1
      }
    },
    mul: function(){
      if(this.failed != this.amount){
        this.success = this.success - 1
        this.failed = this.failed + 1
      }
    }
  }
}
</script>

<style>
.progressbar{
  margin-top: 10px;
  margin-left: 10px;
}
.title{
  width: 140px;
  height: 20px;
  float: left;
}
.progress{
  width: 500px;
  height: 20px;
  margin-top: 4px;
  float: left;
}
.show{
  width: 100px;
  height: 20px;
  float: left;
  text-align: center;
}
.edit{
  width: 100px;
  height: 20px;
  float: left;
}
.greenblock{
  width: 6px;
  height: 20px;
  margin-left: 4px;
  float: left;
  background-color: limegreen;
}
.greyblock{
  width: 6px;
  height: 20px;
  margin-left: 4px;
  float: left;
  background-color: gainsboro;
}
</style>