公众号小程序制作步骤_vue组件完成进度条效果

vue组件实现进度条效果       这篇文章主要为大家详细介绍了vue组件实现进度条效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

一、效果图

二、代码

progress-bar.vue

 template 
 div 
 div 
 span {{label}} /span 
 span {{text}} /span 
 /div 
 div 
 div : /div 
 /div 
 /div 
 /template 
 script 
 export default {
 pro凡科抠图:{
 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 

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


相关阅读