Vue 表单生成器form-create的基本使用

// 引入组件
import { formCreate } from '@form-create/element-ui'
 
// 在Vue组件中使用
export default {
  data() {
    return {
      // 表单生成器实例
      FApi;
    };
  },
  mounted() {
    this.FApi = formCreate.vue3(this, {
      // 全局配置
      options: {
        onSubmit: (formData) => {
          console.log(formData)
        }
      },
      // 组件配置
      components: {
        // 自定义组件
        myInput: {
          name: 'input',
          rule: {
            placeholder: '请输入内容'
          }
        }
      }
    });
 
    // 生成表单
    this.FApi.formCreate(
      // 表单字段配置
      [
        this.FApi.input('username'),
        this.FApi.input('password').type('password'),
        this.FApi.myInput('myField'),
      ],
      // 表单事件
      {
        onSubmit: (formData) => {
          console.log('提交数据：', formData)
        }
      }
    );
  }
}

这个代码实例展示了如何在Vue 3项目中使用form-create来创建表单。首先引入formCreate，然后在组件的mounted钩子中初始化并配置表单生成器实例FApi。接着使用FApi.formCreate方法生成表单，定义了三个输入字段并应用了全局的提交事件处理函数。代码中还演示了如何自定义组件并在表单中使用。