vue項(xiàng)目之?dāng)?shù)量占比進(jìn)度條實(shí)現(xiàn)方式

更新時(shí)間：2022年12月06日 14:45:21 作者：牛先森家的牛奶

這篇文章主要介紹了vue項(xiàng)目之?dāng)?shù)量占比進(jìn)度條實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue數(shù)量占比進(jìn)度條實(shí)現(xiàn)

功能說明：

1、點(diǎn)擊開始，滾動(dòng)條自動(dòng)加；

2、點(diǎn)擊停止，滾動(dòng)條停止加；

封裝如下

<template>
  <div>
    <div class="progress-bar">
      <div
        class="progress"
        :style="{
          width: progressRatio + '%'
        }"
      >
        {{ surplusProgress }}
      </div>
      {{ totalProgress }}
    </div>
    {{ surplusProgress }}
    <button @click="start()">開始</button>
    <button @click="stop()">停止</button>
  </div>
</template>

<script>
export default {
  name: 'index',
  components: {},
  props: {
    total: {
      type: Number
    },
    surplus: {
      type: Number
    }
  },
  data() {
    return {
      totalProgress: 0,
      surplusProgress: 0,
      progressRatio: 0,
      clearInt: null // 定時(shí)器名
    }
  },
  computed: {
    // 用于監(jiān)聽兩個(gè)值同時(shí)存在的情況
    progress() {
      const { surplus, total } = this
      return {
        surplus,
        total
      }
    }
  },
  watch: {
    progress(newVal) {
      this.totalProgress = newVal.total
      this.surplusProgress = newVal.surplus
      // 注意這里是當(dāng)前剩余的值比上總值的一個(gè)比例顯示
      this.progressRatio = (newVal.surplus / newVal.total) * 100
    }
  },
  methods: {
    start() {
      let _this = this
      // 增加的值 = 總數(shù)量 / 100
      let addNum = _this.totalProgress / 100
      clearInterval(_this.clearInt)
      _this.clearInt = setInterval(function () {
        _this.progressRatio = _this.progressRatio + 1
        // 這里剩余的值 必須按照比例去增加 才可以最終到達(dá)總值
        _this.surplusProgress = ((_this.surplusProgress * 100 + addNum * 100) / 100).toFixed(1)
        if (_this.progressRatio >= 100) {
          clearInterval(_this.clearInt)
          _this.progressRatio = _this.progressRatio
          _this.surplusProgress = parseInt(_this.surplusProgress)
        }
      }, 100)
    },
    stop() {
      clearInterval(this.clearInt)
    }
  }
}
</script>

<style  lang="scss" scoped>
.progress-bar {
  width: 500px;
  height: 30px;
  color: #000;
  text-align: center;
  line-height: 30px;
  box-sizing: border-box;
  margin-top: 50px;
  margin-bottom: 20px;
  border: 1px solid gray;
  box-shadow: -1px -1px 1px #000;
  background: rgb(177, 174, 174);
  position: relative;
  .progress {
    height: 100%;
    background: #3165c5;
    color: #fff;
    overflow: hidden;
    position: absolute;
    opacity: 0.5;
    text-align: center;
  }
}
</style>

組件使用

<template>
  <div class="content-box">
    <div class="container">
      <Progress :total="total1" :surplus="surplus1" />
      <Progress :total="total2" :surplus="surplus2" />
    </div>
  </div>
</template>

<script>
import Progress from '@/components/ProgressBar'
export default {
  name: 'record',
  components: {
    Progress
  },
  data() {
    return {
      surplus1: 0,
      total1: 0,
      surplus2: 0,
      total2: 0
    }
  },
  activated() {
    let _this = this
    // 模擬請(qǐng)求情況
    setTimeout(() => {
      _this.surplus1 = 30
      _this.total1 = 100
      _this.surplus2 = 60
      _this.total2 = 220
    }, 3000)
  },
  methods: {},
  mounted() {}
}
</script>

<style scoped>
</style>

效果如下：

在這里插入圖片描述

遇到問題

在到達(dá)終點(diǎn)時(shí)，總數(shù)和剩余值不一致問題，查明問題原因是小數(shù)點(diǎn)的問題，目前保留一位小數(shù)點(diǎn)；

vue實(shí)現(xiàn)進(jìn)度條效果

這里實(shí)現(xiàn)進(jìn)度條用到了es6語法的模版字符串，通過更改css樣式實(shí)現(xiàn)正常顯示進(jìn)度的進(jìn)度條和一種顯示剩余余額的進(jìn)度條：

html代碼不需要改變：

<div class="scheduleCont_1_left_1" :class="10 >= 100 ? 'nobg' : ''">
		//10為展示的進(jìn)度，100為總的進(jìn)度數(shù)量
     <div :style="{ width: `${(10 / 100).toFixed(2) * 100}%` }" class="un_xg_1_3_1"></div>
</div>

正常顯示進(jìn)度的進(jìn)度條：

.scheduleCont_1_left_1{
    position: relative;
    width: 100%;
    height: 0.36rem;
    background: #E9BBFF;
    border-radius: 50px;
    overflow: hidden;
    .un_xg_1_3_1 {
      position: absolute;
      top: 0;
      left: -1px;
      width: 0;
      height: 0.36rem;
      border-radius: 50px;
      background-image: linear-gradient(to right, #B72DF7);
    }
  }

顯示剩余余額的進(jìn)度條：

.scheduleCont_1_left_1 {
  position: relative;
  width: 100%;
  height: .24rem;
  background: #ebebeb;
  border-radius: 50px;
  overflow: hidden;

  .un_xg_1_3_1 {
    float: right;
    height: .24rem;
    border-radius: 50px;
    background-image: linear-gradient(to right, #ff6666);
  }
}