sr/core

vue2 版本核心，可以基于此适配不同的 vue2 ui库。

适配的核心就是对应类型为自己的组件库，且处理默认 props 与自己组件库 props 之间的转换

适配方案可参见 @goocan/lc-form-render-vue2 、@lljj/vue2-form-iview3

使用方法

按如下格式，配置对应组件在当前组件库中的映射关系，可以直接配置全局组件名或者组件构造函数，默认组件 props 为elementUi格式，如果props格式不同需要中间组件来做转换；

1import createVue2Core from '@/core';
2
3const globalOptions = {
4    // widget组件和现有组件库映射关系
5    WIDGET_MAP: {
6        // 默认按schema type 映射默认widget组件
7        types: {
8            // type  boolean
9            boolean: 'el-switch',
10
11            // type  string
12            string: 'el-input',
13
14            // type number
15            number: 'el-input-number',
16
17            // type integer
18            integer: 'el-input-number',
19        },
20
21        // 按 schema format 映射默认widget组件，优先级高于 types
22        formats: {
23            // format: color
24            color: 'el-color-picker',
25
26            // format: time
27            time: TimePickerWidget, // 格式 20:20:39+00:00
28
29            // format: date
30            date: DatePickerWidget, // 格式 2018-11-13
31
32            // format: date-time
33            'date-time': DateTimePickerWidget, // 格式 2018-11-13T20:20:39+00:00
34        },
35
36        // 一些公共常用类型
37        common: {
38            // select option
39            select: SelectWidget,
40
41            // radio
42            radioGroup: RadioWidget,
43
44            // checkout
45            checkboxGroup: CheckboxesWidget,
46        },
47
48        // 这里配置一些 为当前ui库适配过的组件，会在运行时自动注册为全局组件，不注册为全局也可不配置
49        // Vue2 会在调用 createVue2Core 时注册。
50        widgetComponents: {
51            CheckboxesWidget,
52            RadioWidget,
53            SelectWidget,
54            TimePickerWidget,
55            DatePickerWidget,
56            DateTimePickerWidget
57        }
58    },
59
60    // 其它表单相关组件映射关系
61    COMPONENT_MAP: {
62        // form组件
63        form: 'el-form',
64
65        // formItem 组件
66        formItem: 'el-form-item',
67
68        // button 组件
69        button: 'el-button',
70
71        // popover，用在formLable 左右布局时鼠标移入显示description
72        popover: 'el-popover'
73    },
74    HELPERS: {
75        // 是否mini显示 description
76        isMiniDes(formProps) {
77            return formProps && ['left', 'right'].includes(formProps.labselPosition);
78        }
79    }
80};
81
82// 为了性能也可 object.freeze globalOptions 配置数据
83const mySchemaForm = createVue2Core(globalOptions);
84

适配一个新的ui框架只需要适配如上的组件即可