vue-progressbars

1.0.4 • Public • Published

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

Package Sidebar

Install

npm i vue-progressbars

Weekly Downloads

1

Version

1.0.4

License

ISC

Unpacked Size

6.96 kB

Total Files

5

Last publish

Collaborators

  • weiran