秋天的落叶随着秋姑娘翩翩起舞；秋天的落叶随着秋的旋律摇荡；秋天的落叶随着秋的微风留下一片光明的大道。秋天让我们来体会 "自古逢秋悲寂寥 "的凄凉；秋天让我们来体会 "无边落木萧萧下 "的哀愁；秋天让我们来体会 "秋空雁度青天远 "的疏朗。
本文实例为大家分享了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>
本文vue组件如何实现进度条效果到此结束。成功男人的背后永远有一个爱他的女人。小编再次感谢大家对我们的支持！
