Vue自定义表单生成器form-create使用详解

1. 什么是form-create？

form-create是一个基于Vue.js的自定义表单生成器。它可以根据预设的模板或者自定义的UI组件来动态生成表单，方便开发者快速构建各种表单，能够提高开发效率。

2. 如何使用form-create？

2.1 安装

首先，我们需要安装form-create，可以通过npm或者yarn进行安装。

npm install form-create --save
# 或者
yarn add form-create

2.2 使用

在Vue组件中使用form-create，需要先引入form-create的库文件。

// 引入form-create
import formCreate from '@form-create/element-ui'
Vue.use(formCreate)

然后，就可以在Vue组件中使用form-create了。

<template>
  <form-create :rule="rule"></form-create>
</template>

<script>
export default {
  data() {
    return {
      rule: []
    };
  },
  mounted() {
    // 定义表单项
    const rule = [
      {
        type: 'input',
        field: 'username',
        title: '用户名',
        value: ''
      },
      {
        type: 'input',
        field: 'password',
        title: '密码',
        value: ''
      },
      {
        type: 'button',
        title: '提交',
        click: (formData) => {
          console.log(formData);
        }
      }
    ];
    this.rule = rule;
  }
};
</script>

3. 示例

3.1 简单示例

我们先来看一个最简单的form-create的示例。

<template>
  <form-create :rule="rule"></form-create>
</template>

<script>
export default {
  data() {
    return {
      rule: []
    };
  },
  mounted() {
    // 定义表单项
    const rule = [
      {
        type: 'input',
        field: 'username',
        title: '用户名',
        value: ''
      },
      {
        type: 'input',
        field: 'password',
        title: '密码',
        value: ''
      }
    ];
    this.rule = rule;
  }
};
</script>

在这个示例中，我们定义了两个输入框：用户名和密码。

3.2 自定义UI组件示例

除了可以使用form-create提供的UI组件，我们也可以自定义UI组件来使用。

<template>
  <form-create :rule="rule" :option="option"></form-create>
</template>

<script>
export default {
  data() {
    return {
      rule: [],
      option: {
        'user-select': {
          component: 'el-select',
          options: [
            {
              label: '请选择',
              value: ''
            },
            {
              label: '管理员',
              value: 'admin'
            },
            {
              label: '普通用户',
              value: 'user'
            }
          ]
        }
      }
    };
  },
  mounted() {
    // 定义表单项
    const rule = [
      {
        type: 'input',
        field: 'username',
        title: '用户名',
        value: ''
      },
      {
        type: 'input',
        field: 'password',
        title: '密码',
        value: ''
      },
      {
        type: 'user-select',
        field: 'role',
        title: '角色',
        value: ''
      }
    ];
    this.rule = rule;
  }
};
</script>

在这个示例中，我们自定义了一个UI组件：user-select，通过component指定了使用的UI组件（这里使用了element-ui的el-select组件），通过options定义了下拉选项的内容。