表单生成器 Form Builder

# 介绍

基于element-ui实现，通过配置生成的表单，支持多种场景

# 快速使用

# npm方式

# 请先确保正确安装并使用了 element-ui
npm install --save tyro-form-builder
1
2
<template>
  <form-builder :form-data="formData" />
</template>

<script>
  import FormBuilder from 'tyro-form-builder'

  export default {
    components: {
      FormBuilder,
    },
    data() {
      return {
        formData: {
          list: [{
            type: 'input',
            model: 'name',
            label: '名字'
          }]
        }
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# script标签方式

<!-- 请先确保正确安装并使用了 element-ui -->
<script src="/dist/FormBuilder.umd.js"></script>
1
2
<template>
  <form-builder :form-data="formData" />
</template>

<script>
  export default {
    components: {
      FormBuilder: window.FormBuilder.default
    },
    data() {
      return {
        formData: {
          list: [{
            type: 'input',
            model: 'name',
            label: '名字'
          }]
        }
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 开发

# 开发组件

# 开发
npm run dev

# 打包
npm run build

# 发布npm
npm run build
npm login
npm publish
1
2
3
4
5
6
7
8
9
10

# 开发文档

# 开发
npm run docs:dev

# 打包
npm run docs:build
1
2
3
4
5