Hamlet-Web

Appearance

自定义组件 ​

在实际的开发中，FormRender 内置的控件可能不能满足功能上的需要，这时就需要自定义组件支持。

使用自定义组件前，也许已经有内置组件支持。具体见 内置表单组件

使用 FormItem.component 表单内使用自定义组件 ​

全局注册自定义组件 ​

入口文件 main.js，注册多个自定义组件，key 值为组件类型，value 指向组件。

js
import { registerWidgets } from '@hamlet/render'
import { ElColorPicker } from 'element-plus'

registerWidgets({
    colorPicker: ColorPicker,
})
import { registerWidgets } from '@hamlet/render'
import { ElColorPicker } from 'element-plus'

registerWidgets({
    colorPicker: ColorPicker,
})

使用

js
const formConfig = defineFRConfig({
    body: [
        {
            prop: 'name',
            label: '姓名',
            required: true,
            type: 'input',
        },
        {
            prop: 'color',
            label: '颜色',
            required: true,
            type: 'colorPicker',
        },
    ],
})
const formConfig = defineFRConfig({
    body: [
        {
            prop: 'name',
            label: '姓名',
            required: true,
            type: 'input',
        },
        {
            prop: 'color',
            label: '颜色',
            required: true,
            type: 'colorPicker',
        },
    ],
})

最终效果和 component 一致，只是一个是全局注册，一个是局部使用。

自定义组件集成 FormItem ​

formItemBasicProps 包含 config 字段和 formData 字段的声明。

  • config 表单配置
  • formData 表单数据

h-rate.vue

vue
<template>
    <el-rate v-bind="$attrs" :disabled="config.disabled(formData)" />
</template>

<script setup>
import { defineProps } from 'vue'
import { formItemBasicProps } from '@hamlet/render'

defineProps({
    ...formItemBasicProps,
})
</script>
<template>
    <el-rate v-bind="$attrs" :disabled="config.disabled(formData)" />
</template>

<script setup>
import { defineProps } from 'vue'
import { formItemBasicProps } from '@hamlet/render'

defineProps({
    ...formItemBasicProps,
})
</script>