bootstrap向导插件_一个简单干净的VueJS 2.x向导插件

bootstrap向导插件

守望先锋 (vue-good-wizard)

An easy and clean VueJS 2.x wizard plugin.

一个简单干净的VueJS 2.x向导插件。

View demo 查看演示 Download Source 下载源

入门 (Getting Started)

先决条件 (Prerequisites)

The plugin is meant to be used with existing VueJS 2.x projects.

该插件应与现有的VueJS 2.x项目一起使用。

正在安装 (Installing)

Install with npm:

使用npm安装：

npm install --save vue-good-wizard

import into project:

导入项目：

import Vue from 'vue';
import VueGoodWizard from 'vue-good-wizard';

Vue.use(VueGoodWizard);

用法示例 (Example Usage)

<template>
  <div>
    <vue-good-wizard 
      :steps="steps"
      :onNext="nextClicked" 
      :onBack="backClicked">
      <div slot="page1">
        <h4>Step 1</h4>
        <p>This is step 1</p>
      </div>
      <div slot="page2">
        <h4>Step 2</h4>
        <p>This is step 2</p>
      </div>
      <div slot="page3">
        <h4>Step 3</h4>
        <p>This is step 3</p>
      </div>
      <div slot="page4">
        <h4>Step 4</h4>
        <p>This is step 4</p>
      </div>
    </vue-good-wizard>
  </div>
</template>

<script>
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',
        }
      ],
    };
  },
  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
    }
  },
};
</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 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:
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'

选项	描述	类型，示例
步骤(必填)	指定步骤标题和页面ID的对象数组
onNext(可选)	显示下一页之前调用的函数。 这是进行验证等的好地方。返回true继续，或者返回false停留在同一页面上。	例如： function(currentPage){ console.log(currentPage); return true; }
onBack(可选)	显示上一页之前调用的函数。 返回true继续，返回false停留在同一页面上。	例如：
标签选项
previousStepLabel	上一步的标签	默认值：“返回”
nextStepLabel	下一步标签	默认值：“下一步”
finalStepLabel	最后一步的标签	默认值：“保存”

高级用例-下一步调用或异步调用 (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

以下是使用vue-good-wizard如何完成此操作的示例

<template>
  <div>
    <vue-good-wizard 
      ref="wizard"
      :steps="steps"
      :onNext="nextClicked" 
      :onBack="backClicked">
      <div slot="page1">
        <h4>Step 1</h4>
        <p>This is step 1</p>
      </div>
      <div slot="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>
      <div slot="page3">
        <h4>Step 3</h4>
        <p>This is step 3</p>
      </div>
    </vue-good-wizard>
  </div>
</template>

<script>
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
    }
  },
};
</script>

翻译自: https://vuejsexamples.com/an-easy-and-clean-vuejs-2-x-wizard-plugin/

bootstrap向导插件