vue-form-wizard | 一款基于vuejs的强大表单分步导航条组件

vue form wizard是一款基于vuejs的强大表单分步导航条组件。它是用于引导用户按照流程完成任务的分步导航条， 可根据实际应用场景设定步骤。

使用方法

安装

如果您想使用vue form wizard步骤条组件，首先您需要安装它，命令如下：

npm install vue-form-wizard
		

或者通过cdn地址直接引用

<link rel="stylesheet" href="https://unpkg.com/vue-form-wizard/dist/vue-form-wizard.min.css">
<script src="https://unpkg.com/vue-form-wizard/dist/vue-form-wizard.js"></script>			
		

使用

全局注册

// main.js
import VueFormWizard from 'vue-form-wizard'
import 'vue-form-wizard/dist/vue-form-wizard.min.css'
Vue.use(VueFormWizard)
		

局部注册

import {FormWizard, TabContent} from 'vue-form-wizard'
import 'vue-form-wizard/dist/vue-form-wizard.min.css'
//component code
components: {
  FormWizard,
  TabContent
}
		

使用示例

<form-wizard>
  <tab-content title="Personal details">
    My first tab content
  </tab-content>
  <tab-content title="Additional Info">
      My second tab content
   </tab-content>
   <tab-content title="Last step">
     Yuhuuu! This seems pretty damn simple
   </tab-content>
</form-wizard>			
		

Props

vue form wizard步骤条组件的可用props如下：

props: {
  title: {
    type: String,
    default: 'Awesome Wizard'
  },
  subtitle: {
    type: String,
    default: 'Split a complicated flow in multiple steps'
  },
  nextButtonText: {
    type: String,
    default: 'Next'
  },
  backButtonText: {
    type: String,
    default: 'Back'
  },
  finishButtonText: {
    type: String,
    default: 'Finish'
  },
  stepSize: {
    type: String,
    default: 'md',
    validator: (value) => {
      let acceptedValues = ['xs', 'sm', 'md', 'lg']
      return acceptedValues.indexOf(value) !== -1
    }
  },
  /***
  *  Sets validation (on/off) for back button. By default back button ignores validation
  */
  validateOnBack: Boolean,
  /***
  * Applies to text, border and circle
  */
  color: {
    type: String,
    default: '#e74c3c' //circle, border and text color
  },
  /***
  *  Is set to current step and text when beforeChange function fails 
  */
  errorColor: {
    type: String,
    default: '#8b0000'
  },
  /**
  * Can take one of the following values: 'circle|square|tab`
  */
  shape: {
    type: String,
    default: 'circle'
  },
  /**
  * name of the transition when transition between steps
  */
  transition: {
    type: String,
    default: '' //name of the transition when transition between steps
  },
  /***
  * Index of the initial tab to display
  */
  startIndex: {
    type: Number,
    default: 0
  }
}			
		

Tab 的 可用 props如下：

props: {
  title: {
    type: String,
    default: ''
  },
  /***
   * Icon name for the upper circle corresponding to the tab
   * Supports themify icons only for now.
   */
  icon: {
    type: String,
    default: ''
  },
  /***
   * Only render the content when the tab is active
   */
  lazy: {
    type: Boolean,
    default: false
  },
  /***
   * Function to execute before tab switch. Return value must be boolean
   * If the return result is false, tab switch is restricted
   */
  beforeChange: {
    type: Function
  }
}			
		

事件

vue form wizard步骤条组件的可用事件如下：

• on-complete: 当单击完成按钮并执行最后一步的 before-change（如果存在）时调用。此事件不会发送任何参数。
• on-loading: 每当执行异步 before-change 时调用。此事件在执行 before-change 方法之前和之后被发出。on-loading 与一个布尔值一起发出。这个布尔值表示异步操作是否已完成。
• on-validate: 每当 before-change 方法的执行完成时调用。该事件将一个布尔值与选项卡索引一起发送，该布尔值表示验证结果。
• on-error: 当 before-change 是一个 promise 并被拒绝时调用，此时会传递错误信息。
• on-change: 在步骤更改时调用。具有 prevIndex 和 nextIndex 作为参数。

插槽(slots)

• Default: 用于标签页内容。
• title: 包括子标题的上部标题部分。
• prev: 上一个按钮的内容（无需担心处理按钮功能）。
• next: 下一个按钮的内容。
• finish: 完成按钮的内容。
• custom-buttons-left: 出现在“后退”按钮右侧的自定义按钮。
• custom-buttons-right: 出现在“下一个/完成”按钮左侧的自定义按钮。

方法(methods)

可以通过在 form-wizard 组件上使用 refs 访问这些属性和方法。其中一些属性和方法仅供内部使用，而其他一些则可用于通用操作。

• reset: 将向导重置为初始状态。
• activateAll: 将所有步骤激活，就像用户经过了所有步骤一样。
• nextTab: 导航到下一个标签页。单击“下一个”按钮时使用相同的方法。
• prevTab: 导航到上一个标签页。单击“上一个”按钮时使用相同的方法。
• changeTab(oldIndex, newIndex): 从一个标签页导航到另一个标签页。请注意，此方法不会触发验证方法。请谨慎使用！

更多关于vue form wizard步骤条组件的文档信息，请参考: 这里。

github网址：https://github.com/BinarCode/vue-form-wizard