Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 57 Commits
README		README
dev		dev
dist		dist
src		src
.gitignore		.gitignore
.npmignore		.npmignore
LICENSE		LICENSE
README.md		README.md
bili.config.js		bili.config.js
package-lock.json		package-lock.json
package.json		package.json

Repository files navigation

vue-good-wizard

An easy and clean VueJS 2.x wizard plugin

Live Demo

vue-good-wizard Demo

Follow the project progress live

Vue-good-wizard Project

Getting Started

Installing

Install with npm:

npm install --save vue-good-wizard

import into project:

importVuefrom'vue';importVueGoodWizardfrom'vue-good-wizard';Vue.use(VueGoodWizard);

import into component:

// within your component script tagimport{GoodWizard}from'vue-good-wizard';// in your componentscomponents:{'vue-good-wizard':GoodWizard,}

Example Usage

<template><div><vue-good-wizard:steps="steps":onNext="nextClicked":onBack="backClicked"><divslot="page1"><h4>Step 1</h4><p>This is step 1</p></div><divslot="page2"><h4>Step 2</h4><p>This is step 2</p></div><divslot="page3"><h4>Step 3</h4><p>This is step 3</p></div><divslot="page4"><h4>Step 4</h4><p>This is step 4</p></div></vue-good-wizard></div></template><script>exportdefault{name:'demo',data(){return{steps:[{label:'Select Items',slot:'page1',},{label:'Add Constraints',slot:'page2',},{label:'Review',slot:'page3',},{label:'Apply',slot:'page4',options:{nextDisabled:true,// control whether next is disabled or not},}],};},methods:{nextClicked(currentPage){console.log('next clicked',currentPage)returntrue;//return false if you want to prevent moving to next page},backClicked(currentPage){console.log('back clicked',currentPage);returntrue;//return false if you want to prevent moving to previous page}},};</script>

This should result in the screenshot seen above

Component Options

Option	Description	Type, Example
steps (required)	Array of objects that specify step titles and page id	[{label:'Add Constraints',// title for wizard steppage:'page2',//id for div to show for this step},//...]
onNext (optional)	function called before next page is shown. This is a good place to do validation etc. Return true to proceed, or false to stay on the same page.	function ex: function(currentPage){console.log(currentPage);returntrue;}
onBack (optional)	function called before previous page is shown. Return true to proceed, or false to stay on the same page.	function ex: function(currentPage){console.log(currentPage);returntrue;}
Label options
previousStepLabel	label for previous step	default: 'Back'
nextStepLabel	label for next step	default: 'Next'
finalStepLabel	label for final step	default: 'Save'
Useful internal functions
goNext()	for async usecase, you'd want to go next only after your async function is done. See [advanced usecase](https://github.com/xaksis/vue-good-wizard#advanced-usecase---call-next-or-back-asynchronously)	`this.$refs['my-wizard'].goNext(true)`
goTo(step)	if you want to go to a step programmatically, you can use this method	`this.$refs['my-wizard'].goTo(2)` // go to 3rd step.

Advanced usecase - Call next or back asynchronously

In some cases, you might want to change step programmatically. The most common usecase for this is if you want to call an asynchronous action on next/back click and then in the callback want to either go to the next step or stay on the same step.

Following is an example of how this can be done usingvue-good-wizard

<template><div><vue-good-wizardref="wizard":steps="steps":onNext="nextClicked":onBack="backClicked"><divslot="page1"><h4>Step 1</h4><p>This is step 1</p></div><divslot="page2"><h4>Step 2</h4><!-- lets say, this is where my form is that needs to be validated --><el-form:model="myForm"ref="myForm"></el-form></div><divslot="page3"><h4>Step 3</h4><p>This is step 3</p></div></vue-good-wizard></div></template><script>exportdefault{name:'demo',data(){return{steps:[{label:'Select Items',slot:'page1',},{label:'My form',slot:'page2',},{label:'Review',slot:'page3',},],};},methods:{nextClicked(currentPage){const_this=this;// if we're on the form pageif(currentPage==1){// on next, we need to validate the form_this.$refs.myForm.validate((valid)=>{if(valid){//all is good, lets proceed to next step_this.$refs.wizard.goNext(true);}else{//error. don't proceed.console.log('error submit!!');returnfalse;}});returnfalse;//don't proceed by default.}returntrue;//return false if you want to prevent moving to next page},backClicked(currentPage){console.log('back clicked',currentPage);returntrue;//return false if you want to prevent moving to previous page}},};</script>