Formcreate全能表单解决方案详解

一、Formcreate upload

Formcreate提供了一个便捷的上传组件，可以在前端中方便地上传文件，支持多种格式的文件上传，例如图片、文本、PDF等等。在使用upload组件前，需要先引入相关的文件：

/* 引入相关CSS文件 */
import "form-create/dist/form-create.css"

/* 引入相关JS文件 */
import formCreate from "form-create";

/* 注册upload组件 */
formCreate.component('fcUpload');

定义一个名称为uploadForm的表单，设置上传文件的大小为2MB，最多上传3个文件的示例代码如下：

/* 上传组件的配置 */
const uploadConfig = {
  action: '//jsonplaceholder.typicode.com/posts/',
  'btn-text': '上传',
  multiple:true,
  maxNumber: 3,
  list-type: 'picture-card',
  limit: 2 * 1024 * 1024,
  name: 'file'
}

/* 定义一个名为uploadForm的表单实例 */
const uploadForm = formCreate({
  el: '#uploadForm',
  formDesc: ['fileList'],
  formSubmitBtn: false,
  formResetBtn: false,
  formItem: [
    {
      type: 'fcUpload',
      field: 'fileList',
      title: '上传文件',
      upload: uploadConfig
    }
  ]
})

二、怎么修改formcreate的样式

Formcreate的样式可以通过修改相关的CSS文件或者覆盖相关CSS样式来进行修改。如果直接修改核心CSS文件会影响整个系统的样式，建议在自定义的CSS样式文件中对相关组件进行样式的覆盖。以自定义icon为例，代码如下：

/* 引入相关CSS文件 */
import 'form-create/dist/form-create.css'

/* 自定义图标样式 */
.icon-upload {
  font-size: 20px;
  color: blue;
}

上述代码中，样式名为icon-upload的图标样式被修改为蓝色，并增加了20px的字体大小。

三、Formcreate官网

Formcreate官网提供了详细的组件文档、示例代码、API文档等内容，可以通过以下链接进行访问：

https://form-create.com/

四、Formcreate vue3

Formcreate vue3是一个基于Vue3框架的表单解决方案。FormCreateVue3魔法开始之前，需要在项目中添加配置文件 vue.config.js，并写入以下代码：

/* 引入相关插件 */
const vuePlugin = require('@vitejs/plugin-vue')
const formCreatePlugin = require('form-create/plugin')

module.exports = {
  plugins: [
    vuePlugin(),
    formCreatePlugin()
  ]
}

在Vue3组件中使用Formcreate的示例代码如下：

  

<script>
import { defineComponent } from 'vue'
import formCreate from "form-create"
formCreate.component("fcSelect", "ElSelect")
formCreate.component("fcOption", "ElOption")

export default defineComponent({
  data() {
    return {
      rule: [
        {
          type: "fcSelect",
          field: "check1",
          title: "协议选择器",
          value: "Test2",
          options: [
            { value: "Test1", label: "协议1" },
            { value: "Test2", label: "协议2" }
          ]
        }
      ]
    }
  },
  methods: {
    handleSubmit(formData) {
      console.log(formData)
    },
    submit() {
      this.$refs.form.submit()
    }
  }
})
</script>

五、formcreate upload json

当上传文件需要传递额外数据时，需要使用formcreate upload json。代码如下：

/* 定义上传组件的配置 */
const uploadConfig = {
  action: '//jsonplaceholder.typicode.com/posts/',
  maxNumber: 3,
  field: 'file',
  formData: {
    'token': 'ABC123'
  },
  callBack(res){
    return res.data.id;
  },
  headers:{
    'X_CSRF_TOKEN':Math.random()*10000
  },
  before(file){
    return true;
  }
}

/* 在表单中注册上传组件 */
formCreate.component('fcUpload');

/* 定义一个名为uploadForm的表单实例 */
const uploadForm = formCreate({
  el: '#uploadForm',
  formDesc: ['fileList'],
  formSubmitBtn: false,
  formResetBtn: false,
  formItem: [
    {
      type: 'fcUpload',
      field: 'fileList',
      title: '上传文件',
      upload: uploadConfig
    }
  ]
})

六、formcreate表单设计器

formcreate表单设计器可以方便地创建自定义表单，可以通过易于使用的拖放功能实现表单的布局和选择各种类型的表单元素。表单设计器需要将表单元素与表单结构绑定在一起，即描绘一个表单树。示例代码如下：

/* 引入相关组件库 */
import Vue from 'vue'
import { createForm, component } from 'form-create'

/* 引入自定义组件 */
import fcAddress from '@/components/fcAddress.vue'
component('fcAddress', fcAddress)

/* 创建表单树 */
const formTree = [
  component('el-input', {
    type: 'text',
    value: '',
    label: 'Text 组件',
    props: {
      maxlength: 20,
    },
    rules: [
      { required: true, message: '请输入内容', trigger: 'blur' },
    ],
  }),

  component('el-input', {
    type: 'number',
    value: 0,
    label: 'Number 组件',
    props: {
      min: -10,
      max: 10,
    },
    rules: [
      { required: true, type: 'number', message: '请输入数字', trigger: 'blur' },
    ],
  }),

  component('fcAddress', {
    value: {},
    label: '自定义组件',
  }),
]
const formFn = createForm({ formTree })

七、formcreate vue3 naiveui

naiveui是一个基于Vue3框架的UI组件库。在Vue3项目中使用naiveui和Formcreate的代码示例如下：

/* 引入naiveui和formcreate */
import naive from 'naive-ui'
import formCreate from 'form-create'
import 'form-create/dist/form-create.css'

/* 注册naiveui组件 */
formCreate.component('nc-select', 'nc-select')

/* 创建表单 */
const formCreateVue3 = {
  template: `
    
  

      
        
    
        
    
      
   
      提交
   
    
  
  `,
  setup() {
    const formData = Vue.reactive({
      userName: '',
      city: ''
    })

    const submitForm = () => {
      formCreateVue3.$refs.formCreate.validate(valid => {
        if (valid) {
          alert('提交成功')
        } else {
          alert('提交失败')
          return false
        }
      })
    }

    const options = Vue.ref([
      { value: '北京' },
      { value: '上海' },
      { value: '杭州' },
      { value: '南京' }
    ])

    const title = (text) => {
      return `
  
${text}
  
`
    }

    return { formData, submitForm, options, title }
  }
}

/* 添加naiveui组件 */
formCreateVue3.components = {
  [naive.NcSelect.name]: naive.NcSelect
}

/* 添加formcreate实例到Vue实例中 */
formCreateVue3.components.formCreate = formCreate;

/* 渲染Vue实例 */
Vue.createApp(formCreateVue3).use(naive).mount('#app')

八、form-create 自定义组件选取

form-create允许我们自定义组件选取，即在表单中使用自定义的组件。这可以通过以下步骤实现：

1、定义自定义组件。在Vue实例中定义自定义组件，并注册为表单组件：

/* 引入自定义组件 */
import fcAddress from '@/components/fcAddress.vue'

/* 在Vue实例中注册自定义组件 */
formCreate.component('fcAddress', fcAddress)

2、安装form-create cli。安装form-create cli，使用命令行工具生成开发模板：

/* 安装form-create cli */
npm install form-create-cli -g

/* 创建form-create项目 */
form-create create projectName

3、自定义组件选取。在引入表单组件的时候，可以通过指定使用自定义组件，并指定相关的配置信息来实现自定义组件的选取。示例代码如下：

import '@/components/fcAddress.vue';
import { component } from 'fc-library';

component('fcAddress', {
  title: '地址选择框',
  control: 'input',
  props: {
    type: 'fcAddress'
  },
  children: [
    {
      title: '省份',
      field: 'province',
      props: {
        maxlength: 20
      }
    },
    {
      title: '城市',
      field: 'city',
      props: {
        maxlength: 20
      }
    },
    {
      title: '县区',
      field: 'area',
      props: {
        maxlength: 20
      }
    }
  ]
})