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

约定不等于承诺〃 2023-01-05 12:57 173阅读 0赞

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

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

### 1、进度条演示： ###

![在这里插入图片描述][20210112201813145.gif]

### 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>

[20210112201813145.gif]: /images/20221119/f8923ec1892f40d292b3674c02bee07f.png