Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xaksis/vue-good-wizard
An easy and clean VueJS 2.x wizard plugin
https://github.com/xaksis/vue-good-wizard
plugin step-wizard vue vuejs wizard
Last synced: 2 days ago
JSON representation
An easy and clean VueJS 2.x wizard plugin
- Host: GitHub
- URL: https://github.com/xaksis/vue-good-wizard
- Owner: xaksis
- License: mit
- Created: 2017-05-28T03:05:00.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T01:26:24.000Z (over 1 year ago)
- Last Synced: 2024-04-24T19:06:00.420Z (6 months ago)
- Topics: plugin, step-wizard, vue, vuejs, wizard
- Language: Vue
- Size: 1.46 MB
- Stars: 288
- Watchers: 13
- Forks: 43
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-good-wizard - good-wizard?style=social) - VueJS 2.x wizard plugin (UI组件)
- awesome-github-vue - vue-good-wizard - VueJS 2.x wizard plugin (UI组件)
- awesome - vue-good-wizard - VueJS 2.x wizard plugin (UI组件)
- awesome-github-vue - vue-good-wizard - VueJS 2.x wizard plugin (UI组件)
README
# vue-good-wizard
[](https://www.npmjs.com/package/vue-good-wizard)
[](https://github.com/xaksis/vue-good-wizard/releases)
[](https://github.com/xaksis/vue-good-wizard/blob/master/LICENSE)
[](https://www.jsdelivr.com/package/npm/vue-good-wizard)
An easy and clean VueJS 2.x wizard plugin
## Live Demo
[vue-good-wizard Demo](https://jsfiddle.net/aks9800/ygkruetq/)
## Follow the project progress live
[Vue-good-wizard Project](https://timerbit.com/#/public/U1kivTdfbz4T3hJ3E7BJ)
## Getting Started
### Installing
Install with npm:
```bash
npm install --save vue-good-wizard
```
import into project:
```js
import Vue from 'vue';
import VueGoodWizard from 'vue-good-wizard';
Vue.use(VueGoodWizard);
```
**or**
import into component:
```js
// within your component script tag
import { GoodWizard } from 'vue-good-wizard';
// in your components
components: {
'vue-good-wizard': GoodWizard,
}
```
## Example Usage
```html
Step 1
This is step 1
Step 2
This is step 2
Step 3
This is step 3
Step 4
This is step 4
export default {
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)
return true; //return false if you want to prevent moving to next page
},
backClicked(currentPage) {
console.log('back clicked', currentPage);
return true; //return false if you want to prevent moving to previous page
}
},
};
```
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 step
page: '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);
return true;
}
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);
return true;
}
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 using *vue-good-wizard*
```html
Step 1
This is step 1
Step 2
Step 3
This is step 3
export default {
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 page
if (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!!');
return false;
}
});
return false; //don't proceed by default.
}
return true; //return false if you want to prevent moving to next page
},
backClicked(currentPage) {
console.log('back clicked', currentPage);
return true; //return false if you want to prevent moving to previous page
}
},
};
```
## Authors
* **Akshay Anand** - [xaksis](https://github.com/xaksis)
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details