vue2.X 实现动态进度条效果

不高兴

已于 2023-09-06 14:29:17 修改

阅读量1.1k

点赞数

文章标签：前端 javascript vue.js 前端框架

于 2023-09-06 14:27:19 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42659817/article/details/132429776

版权

文章描述了一个使用Vue.js编写的动态百分比进度条组件，通过监听数据变化计算并更新进度，同时展示了CSS样式和动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template lang="pug">
      .line
        .proportion(:style="`width: ${percent}%;`")
          img(
            src="../../../../assets/images/xxx/xxx/patrol_icon.png",
            :style="`left: ${percent + 9}%;`"
          )
</template>
<script>
export default {
  data() {
    return {
      percent: 0,
      startValue: 0, // 初始值
      endValue: 0, // 结束值
      duration: 1, // 动画时间
      playAnimation: null,
    };
  },
  watch: {},
  mounted() {
  },
  created() {
    GetData({}).then(res => {
      if(res&&res.length) {
        let data = res[0]
        if(data.total) { // 除法：numDiv 保留两位小数：filterToFixed
          this.percent = this.filterToFixed((this.numDiv(data.finishData, data.total) || 0)*100, 2)
          this.endValue = this.percent
        }
        this.progress();
  },
  methods: {
    progress() {
      const that = this;
      let progress = this.startValue;
      const endValue = this.endValue;
      let time = (this.duration * 1000) / (endValue - progress); // 根据传入时间计算执行时间
      if (progress >= endValue) {
        progress = endValue;
      }
      this.playAnimation = setInterval(function () {
        progress++;
        if (progress >= endValue) {
          progress = endValue;
          clearInterval(this.playAnimation);
        }
        that.percent = progress;
      }, time);
    },
  },
  beforeDestroy() {
    clearInterval(this.playAnimation);
    this.playAnimation = null;
  },
};
</script>
<style scoped lang="less">
.patrolClassification {
  width: 100%;
  height: 100%;
  position: relative;
  .progress-warps {
    width: 52%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .line {
      position: relative;
      width: 202px;
      height: 14px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid #00c4ff;
      img {
        width: 32px;
        position: absolute;
        top: -48px;
        // left: -32px;
      }
      .proportion {
        background: linear-gradient(90deg, #00c4ff 0%, #00ffe6 100%);
        width: 137px;
        height: 8px;
        position: absolute;
        top: 2px;
        left: 2px;
      }
    }
  }
}
</style>