Vue Form Wizard
made with Vuejs

Vue Form Wizard

这是一个动态表单向导组件。

相关问答
查看全部
简介及使用教程

Vue Form Wizard是一个动态表单向导组件,基于vue,没有任何外部依赖,简化了标签向导的管理,让用户专注于应用程序的功能部分,而不必在细节上浪费时间。

安装

Npm

npm i vue-form-wizard

Yarn

yarn add vue-form-wizard

浏览器

<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>

使用

注册组件

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

//local registration
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>

示例

image.png

image.png

image.png

image.png

作者

Cristi Jora

@jora_cristi

相关项目