vue-progressbars

基于vue的一款进度条组件

文档

举例

这里主要以第一个默认组件为例子 来举例如何调用使用 组件名为 NormalBar.vue

具体组件API查看下面文档

一 使用方法

• 安装组件

   npm i vue-progressbar -S
  

• 注册组件 在vue文件中引用组件

   import NormalBar from 'vue-progressbar/lib/normalBar'
   components = {
   	NormalBar
   }
  

二 通用初始化步骤

• 初始化组件

   data () {
     return {
       normalBar: NormalBar.empty()
     }
   }
  

• 绑定data对象

   <NormalBar :value="normalBar" @change="changeNormalBar"/>
  

• 监听组件变更 change

   changeNormalBar (value) {
   	this.normalBar = NormalBar.empty(NormalBar.Logic.setCurrentTime(value))   
   }
  

三 组件相关API

• NormalBar.vue

  props

  Options	Type	Description	Default
  width	Number	进度条宽度	605
  height	Number	进度条高度	16
  totalTime	Number	总秒数	10
  currentTime	Number	当前剩余秒数	10
  barDefaultColor	String	进度条默认底色	'#E9E9E9'
  barColor	String	进度条进度底色	'#FFB936'
  showInfo	Boolean	是否显示倒计时	true
  testStyle	Object	进度条倒计时样式	样式对象

  methods

  empty

  初始化props 用法如下

   NormalBar.empty({
       totalTime: 15,
       showInfo: false
   })
  

  Logic

  Options	Type	Description	Default
  setCurrentTime	Function	设置当前秒数	props
  setHidden	Function	设置隐藏倒计时	props

  用法如下

   NormalBar.Logic.setCurrentTime(Number) // 更新切换状态
  

   NormalBar.Logic.setHidden() // 更新切换状态