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>

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