网站首页 » 前端开发 » Vue2 组件:进度条
上一篇:
下一篇:

Vue2 组件:进度条

组件实现了:

  • 可自定义进度条颜色
  • 可自定义进度条高度
  • 进度文字位置可指定
  • 进度条动画时长

效果图:

Vue2 进度条组件

现在我们就来看看组件要怎么实现

代码
<template>
  <div class="ku-progress-box" :class="{true:'outer '+ textPosition ,false:'inner '+ textPosition}[isOuter] " :style="`height:${barHeight}px`">
      <div class="ku-progress-line-bar" :style="`border-radius:${barHeight}px`">
          <div class="ku-progress-line-bar-runner" :style="runnerStyle">
            <span v-if="!isOuter" class="ku-progress-text">{{textCurrentValue}}%</span>
          </div>
      </div>
      <span v-if="isOuter" class="ku-progress-text">{{textCurrentValue}}%</span>
  </div>
</template>
<script>
export default {
  name: "kuProgress",
  data() {
    return {
      barEndValue: 0,
      timer: null,
      textCurrentValue: 0,
      runnerStyle: ""
    };
  },
  props: {
    dulation: {
      type: Number,
      default: 1
    },
    percentage: {
      type: Number,
      default: 0
    },
    barHeight: {
      type: Number,
      default: 5
    },
    textPosition: {
      type: String,
      default: "outer-right"
    },
    backgroundColor: {
      type: String,
      default: "#50bfff"
    }
  },
  computed: {
    isOuter() {
      return !!~this.textPosition.search("outer"); // 返回一个布尔值
    }
  },
  created() {},
  methods: {},
  mounted() {
    setTimeout(() => {
      this.barEndValue = this.percentage;

      this.runnerStyle = `width: ${this.barEndValue}%;transition:${
        this.dulation
      }s;background:${this.backgroundColor}`;

      this.timer = setInterval(() => {
        this.textCurrentValue += 1;
        if (this.textCurrentValue >= this.percentage) {
          this.textCurrentValue = this.percentage;
          clearInterval(this.timer);
        }
      }, (this.dulation / this.barEndValue) * 1000);
    });
  }
};
</script>
<style scoped>
.ku-progress-box {
  position: relative;
}
.ku-progress-line-bar {
  height: 6px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background: #eee;
  -webkit-box-shadow: inset 2px 2px 3px #ddd;
  -moz-box-shadow: inset 2px 2px 3px #ddd;
  box-shadow: inset 2px 2px 3px #ddd;
  border-radius: 8px;
  height: 100%;
}
.ku-progress-line-bar-runner {
  width: 0;
  height: 6px;
  position: absolute;
  left: 0;
  background: #50bfff;
  border-radius: 8px;
  height: 100%;
  border-radius: inherit;
  /* transition: 1s; */
}
.ku-progress-text {
  position: absolute;
}
.ku-progress-box.outer .ku-progress-text {
  right: 0px;
}
.ku-progress-box.outer-top .ku-progress-text {
  top: -24px;
}
.ku-progress-box.outer-right .ku-progress-line-bar {
  right: 45px;
}
.ku-progress-box.outer-right .ku-progress-text {
  top: 50%;
  transform: translateY(-50%);
}
.ku-progress-box.outer-bottom .ku-progress-text {
  bottom: -24px;
}
.ku-progress-box.inner .ku-progress-text {
  font-size: 14px;
  color: #fff;
  top: 50%;
  line-height: 1.1;
}
.ku-progress-box.inner-left .ku-progress-text {
  left: 24px;
  transform: translate(-50%, -50%);
}
.ku-progress-box.inner-right .ku-progress-text {
  right: 12px;
  transform: translateY(-50%);
}
.ku-progress-box.inner-center .ku-progress-text {
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

简单地使用:

在要使用的地方引入组件后,在 HTML 结构中通过对应标签调用就行:

<ku-progress text-position="outer-top" :percentage="90"  :bar-height="10"></ku-progress>

参数说明:

属性 详细说明
percentage
必填,进度百度比值
bar-height
可选,进度条高度(默认值为5)
text-position
可选 ,指定进度文字的位置(默认外右outer-right)
dulation
可选 ,指定进度条动画时长(默认值为1)
background 可选 ,指定进度条颜色(默认值为#50bfff)

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/vue-components-progress/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END