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>



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