variant form 新增自定义组件_variant form自定义组件

以auto-complete-widget为例

1. 在‘/src/extension’中 新增组件 auto-complete-widget
2. 在‘/src/extension/samples/extension-schema.js’ 中 新增字段组件架构 autoCompleteSchema
   （参考‘/src/components/form-designer/widget-panel/widgetsConfig.js’）

export const autoCompleteSchema = {
  type: 'auto-complete',
  icon: 'autocomplete',
  formItemFlag: true,
  options: {
    name: '',
    label: '',
    labelZh: '',
    labelAlign: '',
    type: 'text',
    defaultValue: '',
    placeholder: '',
    columnWidth: '200px',
    size: '',
    labelWidth: null,
    labelHidden: false,
    readonly: false,
    disabled: false,
    hidden: false,
    clearable: true,
    showPassword: false,
    required: false,
    requiredHint: '',
    validation: '',
    validationHint: '',
    optionItems: [],
    //-------------------
    customClass: '',  //自定义css类名
    labelIconClass: null,
    labelIconPosition: 'rear',
    labelTooltip: null,
    minLength: null,
    maxLength: null,
    showWordLimit: false,
    prefixIcon: '',
    suffixIcon: '',
    appendButton: false,
    appendButtonDisabled: false,
    buttonIcon: 'el-icon-search',
    //-------------------
    onMounted: '',
    onChange: '',
  },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

3. 在‘/src/extension/extension-loader.js’
   加载字段组件 AutoCompleteWidget
   加载字段组件 架构 autoCompleteSchema

export const loadExtension = function () {
    loadAutoCompleteWidget()
}
const loadAutoCompleteWidget = () => {
    /**
   * 加载字段组件步骤：
   * 1. 加载组件Json Schema;
   * 2. 全局注册字段组件，字段组件设计期和运行期共用，故需要仅需注册一个组件；
   * 3. 全局注册属性编辑器组件（基本属性、高级属性、事件属性）；
   * 4. 注册字段组件的代码生成器；
   * 5. 加载完毕。
   */
     addCustomWidgetSchema(autoCompleteSchema)  //加载组件Json Schema
     Vue.component(AutoCompleteWidget.name, AutoCompleteWidget)  //注册组件
     registerFWGenerator('autoComplete', autoCompleteTemplateGenerator)  //注册字段组件的代码生成器
     /* 字段组件加载完毕 end */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4. 注册字段组件的代码生成器 autoCompleteTemplateGenerator
5. 其他（依据extension-schema.js/type 配置）

• 在/src/icons/svg/*配置新增组件图标
• 在/src/lang/zh-CN_extension.js、/src/lang/en-US_extension.js 配置新增组件名称