vue2-steps-progress 步骤进度条

开源地址
gitee https://gitee.com/tomiaa/vue2...
github https://github.com/tomiaa12/v...

预览

安装

npm i vue2-steps-progress

开始

main.js

import stepsProgress from 'vue2-steps-progress'
Vue.use(stepsProgress);

or

import stepsProgress from 'vue2-steps-progress'
export default {
  components: {
    stepsProgress,
  }
}

模板

currentProgress

prop	type	default
currentProgress	Number	0

lineBackground

prop	type	default
lineBackgroundColor	String	\#dcdcdc
lineForeground	String	\#019879

startLocation && endLocation

prop	type	default
startLocation	Number	0
endLocation	Number	100

startLocation 是整个进度条起始的百分比位置

endLocation 是整个进度条结束的百分比位置

currentProgress 是 startLocation 至 endLocation 中间的百分比

demo-1-step

prop	type	default
steps	Array
currentStep	Number	0
roundWidth	string	1em

roundWidth

圆半径

currentStep

currentStep 是 当前进行到step的下标, currentStep之前的圆点会点亮。

steps

demo2

demo3-slot