vue-steps-progress-bar
vue-steps-progress-bar
Demo
you can see demo and docs here
Install the plugin with npm:
npm install vue-steps-progress-bar
Usage
import the component and pass the options
<template>
<step-progress-bar :options="options" ref="progress" />
</tepmlate>
<script>
import StepProgressBar from 'vue-steps-progress-bar'
export default {
components: {
StepProgressBar
},
data () {
return {
options: {
maxWidth: '100%',
nodeWidth: 40,
nodeHeight: 40,
barHeight: 3,
showTooltip: true,
showContent: true,
// barType can be dashed or solid
barType: 'dashed',
// expects a function
onNext: this.onNext,
// expects a function
onFinish: this.onFinish,
nodes: [
{
content:'step 1',
tooltip:'sth about step 1'
},
{
content:'step 2',
tooltip:'sth about step 2'
},
{
content:'step 3',
tooltip:'sth about step 3'
},
{
content:'step 4',
tooltip:'sth about step 4'
}
]
}
}
}
}
</script>
call component methods using ref
methods: {
someDummyFunction() {
// goes to the next step
this.$refs.progress.next()
// goes to the previous step
this.$refs.progress.prev()
// restarts the step progress bar
this.$refs.progress.restart()
}
}
That's it :)
Dependencies
@babel/core: ^7.14.6@babel/preset-env: ^7.14.7@rollup/plugin-alias: ^3.1.2@rollup/plugin-babel: ^5.3.0@rollup/plugin-commonjs: ^14.0.0@rollup/plugin-node-resolve: ^9.0.0@rollup/plugin-replace: ^2.4.2@vue/cli-plugin-babel: ^4.5.13@vue/cli-service: ^4.5.13@vue/compiler-sfc: ^3.0.11cross-env: ^7.0.3minimist: ^1.2.5postcss: ^8.2.10rimraf: ^3.0.2rollup: ^2.52.8rollup-plugin-postcss: ^4.0.0rollup-plugin-terser: ^7.0.2rollup-plugin-vue: ^6.0.0vue: ^3.0.5sass: ^1.36.0sass-loader: ^10.2.0