技術標籤：VUE專案入門vuehtmlcsshtml5css3

VUE專案學習（六）：自定義間隔進度條

網上有很多種進度條，但是我沒找到這種間隔進度條，索性自己弄一個

1、進度條演示：

2、VUE程式碼展示

template程式碼：

<div class="progressbar">
    <div class="title">
      <span>自定義進度條:</span>
    </div>
    <div class="progress">
 

       <div class="greenblock" v-for="(index) in success" ></div>
       <div class="greyblock" v-for="(index) in failed" ></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) in success" ></div>
       <div class="greyblock" v-for="(index) in failed" ></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>