Vue的轻量级进度条

Vue的轻量级进度条
插件名称 vue-progressbar
发布时间 2020年6月29日
插件作者 hilongjw

适用于vue 2.x和Vue 1.x的轻量级但可自定义且用途广泛的进度条组件。

特征:

  • 自定义颜色,厚度,位置等
  • 平滑过渡。
  • 使您可以将进度粘贴到屏幕的顶部或底部。
  • 达到100%时自动完成。
  • 支持vue-route。

安装和下载:

# npm
$ npm install vue-progressbar


#yarn
$ yarn vue-progressbar

构造函数选项

描述默认选项
color进度条的颜色'rgb(143, 255, 199)'RGB HEX HSL HSV VEC
failedColor加载失败时进度条的颜色'red'RGBHEXHSLHSVVEC
thickness进度条的厚度'2px'pxempt%vhvw
transition进度条的过渡速度/不透明度/终止{speed: '0.2s', opacity: '0.6s', termination: 300}speedopacitytermination
autoRevert临时颜色更改将在完成或失败后自动恢复truetrue, false
location更改进度栏的位置topleftrighttopbottom
position更改进度条的位置fixedrelativeabsolutefixed
inverse反转进度条的方向falsetrue, false
autoFinish允许进度条在接近100%时自动完成truetrue, false