Vue.js 2 向导组件 - vue-good-wizard

Vue.js 2 向导组件 - vue-good-wizard
插件名称 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>