vue中进度条写法_vue组件实现进度条效果

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

一、效果图

二、代码

progress-bar.vue

{{label}}

{{text}}

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;

}

}

}

.vue-progress-bar.default-theme{

.vue-progress-bar__outer {

background: #eee;

}

}

.vue-progress-bar {

.vue-progress-bar__tiptext {

float: right;

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。