Skip to content

扩展表单设计器

如果vue-form-craft的内置组件不能完全满足我们的业务需求,可以为 vue-form-craft 扩展更多可拖拽组件!

如何扩展?

只需要在全局注册vue-form-craft时,传入extendElements

extendElements是一个对象!key是组件标识,value是FormElement

注意:key必须与FormElement.component字段一致!

ts
type extendElements = { [key: string]: FormElement }
ts
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import VueFormCraft from 'vue-form-craft'
import extendElements from './extendElements'

const app = createApp(App)

app.use(ElementPlus)
app.use(VueFormCraft, { extendElements })
app.mount('#app')

组件对象FormElement

一个FormElement对象代表一个可拖拽组件。

同理我们想扩展更多组件,需要按照FormElement的接口格式去配置,然后传给vue-form-craft即可!

ts
interface FormElement {
  title: string
  component: string
  render: string | VNode | Component
  icon: string | VNode | Component
  type: 'assist' | 'layout' | 'basic' | 'high'
  order: number
  modelName?: string
  attrSchema: FormSchema
}

下面详细介绍每个FormElement的每个属性:

title

组件名称

icon

组件Icon

icon格式为vue的SFC组件

component

组件标识字段,必须与FormElement的键一致,才能正确渲染!

render

渲染该组件所用的Vue-SFC组件,可以是一个已经被全局注册的组件名称。

内部会通过<component is="render"/>去渲染它。

type

组件类型,这个参数决定了组件位于左侧菜单的哪个分类,如果type='basic',那么组件需要能接收v-model

order

左侧菜单会按照order大小排序所有组件

modelName

传给组件的v-model名称,默认是modelValue

attrSchema

组件的配置表单的schema.

当选中某个表单项时,在右侧可以编辑该表单项的各种配置,实际上这个右侧也是用FormRender渲染的! 所以,建议用设计器去拖拽生成,然后copy过来!

alt text