vue组件实现进度条效果

 更新时间:2018年06月06日 11:14:42   作者:wl_  
这篇文章主要为大家详细介绍了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>

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

相关文章

  • Vue中如何使用mock模拟数据

    Vue中如何使用mock模拟数据

    这篇文章主要介绍了Vue中如何使用mock模拟数据,具有很好的价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue3组件化开发之可复用性的应用实例详解

    vue3组件化开发之可复用性的应用实例详解

    不断把公共的、可以独立拆分出来的抽出来作为一个独立可复用的组件来向上提供调用,这样让我们的代码更加方便组织和管理,并且扩展性也更强,下面这篇文章主要给大家介绍了关于vue3组件化开发之可复用性应用的相关资料,需要的朋友可以参考下
    2022-06-06
  • Vue el-table 默认展开某一行的实例

    Vue el-table 默认展开某一行的实例

    这篇文章主要介绍了Vue el-table 默认展开某一行的实例,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue+elementui实现点击table中的单元格触发事件--弹框

    vue+elementui实现点击table中的单元格触发事件--弹框

    这篇文章主要介绍了vue+elementui实现点击table中的单元格触发事件--弹框,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • VueJs单页应用实现微信网页授权及微信分享功能示例

    VueJs单页应用实现微信网页授权及微信分享功能示例

    本篇文章主要介绍了VueJs单页应用实现微信网页授权及微信分享功能示例,具有一定的参考价值,有兴趣的可以了解一下
    2017-07-07
  • 详解如何在你的Vue项目配置vux

    详解如何在你的Vue项目配置vux

    这篇文章主要介绍了详解如何在你的Vue项目配置vux,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Vue中created与mounted的区别浅析

    Vue中created与mounted的区别浅析

    在使用vue框架的过程中,我们经常需要给一些数据做一些初始化处理,这时候我们常用的就是在created与mounted选项中作出处理,这篇文章主要给大家介绍了关于Vue中created与mounted区别的相关资料,其中部分知识点可能是我们日常工作会见到或用到的,需要的朋友可以参考下
    2022-06-06
  • vuex分模块后,实现获取state的值

    vuex分模块后,实现获取state的值

    这篇文章主要介绍了vuex分模块后,实现获取state的值,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue中锚点的三种方法

    vue中锚点的三种方法

    本文给大家带来了vue中锚点的三种方法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2018-07-07
  • 关于vue设置环境变量全流程

    关于vue设置环境变量全流程

    这篇文章主要介绍了关于vue设置环境变量全流程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03

最新评论