基于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() // 更新切换状态