To adapt a UI library, use createVue2Core (note: despite the name, this is for Vue 3 core) and provide a globalOptions object. This object maps JSON Schema types, formats, and common components to your specific UI components.
Key configuration areas:
WIDGET_MAP.types: Maps JSON Schema type (e.g., string, number) to UI components.WIDGET_MAP.formats: Maps JSON Schema format (e.g., date, color) to UI components. This has higher priority than types.WIDGET_MAP.common: Maps common form elements like select or radioGroup.WIDGET_MAP.widgetComponents: A list of custom components to be automatically registered as global components during the form's setup phase.COMPONENT_MAP: Maps structural form components like form, formItem, button, and popover.HELPERS: Provides utility functions for form logic, such as determining layout states.
import createVue2Core from '@lljj/vue3-form-core';
const globalOptions = {
// widget组件和现有组件库映射关系
WIDGET_MAP: {
// 默认按schema type 映射默认widget组件
types: {
// type boolean
boolean: 'el-switch',
// type string
string: 'el-input',
// type number
number: 'el-input-number',
// type integer
integer: 'el-input-number',
},
// 按 schema format 映射默认widget组件，优先级高于 types
formats: {
// format: color
color: 'el-color-picker',
// format: time
time: TimePickerWidget, // 格式 20:20:39+00:00
// format: date
date: DatePickerWidget, // 格式 2018-11-13
// format: date-time
'date-time': DateTimePickerWidget, // 格式 2018-11-13T20:20:39+00:00
},
// 一些公共常用类型
common: {
// select option
select: SelectWidget,
// radio
radioGroup: RadioWidget,
// checkout
checkboxGroup: CheckboxesWidget,
},
// 这里配置一些为当前ui库适配过的组件，会在运行时自动注册为全局组件，不注册为全局也可不配置
// Vue3 只有在组件内才能获取到当前的app，所以注册时机是在 form组件setup中，且只会注册一次。
widgetComponents: {
CheckboxesWidget,
RadioWidget,
SelectWidget,
TimePickerWidget,
DatePickerWidget,
DateTimePickerWidget
}
},
// 其它表单相关组件映射关系
COMPONENT_MAP: {
// form组件
form: 'el-form',
// formItem 组件
formItem: 'el-form-item',
// button 组件
button: 'el-button',
// popover，用在formLable 左右布局时鼠标移入显示description
popover: 'el-popover'
},
HELPERS: {
// 是否mini显示 description
isMiniDes(formProps) {
return formProps && ['left', 'right'].includes(formProps.labselPosition);
}
}
};
const mySchemaForm = createVue2Core(globalOptions);
