插件名称 | vue-good-wizard |
---|---|
版本号 | v1.4.1 |
发布时间 | 2021年1月31日 |
插件作者 | xaksis |
一个简单易用的VueJS 2.x向导插件,非常适合注册表单。
npm install --save vue-good-wizard
<template>
<div>
<vue-good-wizard
:steps="steps"
:onNext="nextClicked"
:onBack="backClicked">
<div slot="page1">
<h4>步骤 1</h4>
<p>这是1</p>
</div>
<div slot="page2">
<h4>步骤 2</h4>
<p>这是2</p>
</div>
<div slot="page3">
<h4>步骤 3</h4>
<p>这是3</p>
</div>
<div slot="page4">
<h4>步骤4</h4>
<p>这是4</p>
</div>
</vue-good-wizard>
</div>
</template>
<script>
export default {
name: 'demo',
data(){
return {
steps: [
{
label: '第一步',
slot: 'page1',
},
{
label: '第二步',
slot: 'page2',
},
{
label: '第三步',
slot: 'page3',
},
{
label: '第四步',
slot: 'page4',
options: {
nextDisabled: true, // 控制是否禁用next
},
}
],
};
},
methods: {
nextClicked(currentPage) {
console.log('next clicked', currentPage)
return true; //如果要阻止移动到下一页,则返回false
},
backClicked(currentPage) {
console.log('back clicked', currentPage);
return true; //如果要阻止移动到上一页,则返回false
}
},
};
</script>