form-create和form-create-designer创建自定义组件

form-create 和 form-create-designer 是基于Vue的表单生成和设计器库，可以用来创建自定义表单组件。以下是如何使用这两个库创建自定义组件的简要步骤和示例代码：

1. 安装 form-create 和 form-create-designer：

npm install form-create
npm install form-create-designer

2. 在Vue项目中注册 form-create 和 form-create-designer：

import Vue from 'vue'
import formCreate from '@form-create/element-ui'
import formCreateDesigner from '@form-create/designer'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
Vue.use(ElementUI)
Vue.use(formCreate)
Vue.use(formCreateDesigner)

3. 创建自定义组件，例如一个简单的日期选择器组件：

// MyDatePicker.vue
<template>
  <el-date-picker v-model="value" type="date" placeholder="选择日期" />
</template>
 
<script>
export default {
  props: {
    value: {
      type: [String, Date],
      default: ''
    }
  }
}
</script>

4. 将自定义组件注册到 form-create：

import MyDatePicker from './MyDatePicker.vue'
 
formCreate.component('my-date-picker', MyDatePicker)

5. 使用 form-create-designer 进行表单设计，并在设计器中添加自定义组件：

<template>
  <div>
    <form-create v-model="fApi" :rule="rule" />
    <form-create-designer v-model="rule" />
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      fApi: {},
      rule: [
        {
          type: 'my-date-picker',
          field: 'date',
          title: '自定义日期选择器'
        }
      ]
    }
  }
}
</script>

6. 运行Vue应用，现在你可以在设计器中看到并使用自定义的日期选择器组件，同时也可以在表单中使用它。

以上是创建和使用自定义组件的基本步骤，具体实现可能会根据你的项目需求有所不同。