vue组件实现进度条效果

本文实例为大家分享了vue实现进度条效果的具体代码，供大家参考，具体内容如下

一、效果图

二、代码

progress-bar.vue

<template>
 <div class="vue-progress-bar default-theme">
 <div class="vue-progress-bar__tip">
 <span class="vue-progress-bar__tiplabel">{{label}}</span>
 <span class="vue-progress-bar__tiptext">{{text}}</span>
 </div>
 <div class="vue-progress-bar__outer">
 <div class="vue-progress-bar__inner" :style="barStyle"></div>
 </div>
 </div>
</template>

<script>
 export default {
 props:{
 label:String,
 text:String,
 height:{
 type: Number,
 default: 0,
 required: true,
 validator: val => val >= 0
 },
 color: {
 type: String,
 default: ''
 },
 percentage:{
 type: Number,
 default: 0,
 required: true,
 validator: val => val >= 0 && val <= 100
 }
 },
 computed:{
 barStyle() {
 const style = {};
 style.width = this.percentage + '%';
 style.height = this.height + 'px';
 style.backgroundColor = this.color;
 return style;
 }
 }
 }
</script>

<style lang="scss" scoped>
 .vue-progress-bar.default-theme{
 .vue-progress-bar__outer {
 background: #eee;
 }
 }

 .vue-progress-bar {
 .vue-progress-bar__tiptext {
 float: right;
 }
 }
</style>