开源项目低代码表单设计器FcDesigner扩展右侧组件的配置规则

ops/2024/11/18 0:34:12/

在开源项目低代码表单设计器 FcDesigner 中，您可以通过定制化的配置规则来扩展组件的功能，从而满足特定的业务需求。这些配置规则如 baseRule、formRule、componentRule 和 appendConfigData 提供了一种灵活的方法来控制组件、表单的行为和外观。以下是对这些参数的详细解释和一些示例应用，以帮助您更好地理解和使用这些功能。

源码地址: Github | Gitee | 文档

在这里插入图片描述

数据结构

每个配置规则可以定义为一个函数或一个对象，它们返回一个或一组规则。这些规则可以在生成时进行追加、覆盖或前置处理。

type extendRule = ((arg: { t: t }) => Rule[]) | {rule: (arg: { t: t }) => Rule[];append?: boolean; // 决定是否将规则追加到现有规则后prepend?: boolean; // 决定是否将规则添加到现有规则的前面
};type Config = {baseRule?: extendRule;formRule?: extendRule;componentRule?: {default: (rule: Rule, arg: { t: t }) => Rule[] | {rule: (rule: Rule, arg: { t: t }) => Rule[];append?: boolean;prepend?: boolean;};[id: string]: (rule: Rule, arg: { t: t }) => Rule[] | {rule: (rule: Rule, arg: { t: t }) => Rule[];append?: boolean;prepend?: boolean;};};
}

扩展表单配置

增加一个备注输入框在表单配置的顶部，用于在创建表单时留出额外的信息输入空间。

<template><fc-designer ref="designer" :config="config"/>
</template><script setup>
const config = {appendConfigData: ['mark'],formRule: {prepend: true,rule() {return [{ type: 'input', field: 'mark', title: '表单备注' }];}}
}
</script>

扩展表单组件配置

在表单组件配置的末尾增加一个字段映射输入框，方便进行字段与数据表的映射。

<template><fc-designer ref="designer" :config="config"/>
</template><script setup>
const config = {appendConfigData(rule) {return {formCreateDb_field: rule.db_field // 将db_field映射至formCreateDb_field};},formRule: {prepend: true,rule() {return [{ type: 'input', field: 'mark', title: '表单备注' }];}}
}
</script>

扩展指定组件配置

为输入框组件增加一个开关，该开关用于设置字段是否必填，并位于配置项的顶部。

<template><fc-designer ref="designer" :config="config"/>
</template><script setup>
const config = {appendConfigData: ['mark'],componentRule: {default: {prepend: true,rule() {return [{ type: 'input', field: 'mark', title: '备注' }];}},input: {prepend: true,rule() {return [{ type: 'switch', field: '$required', title: '是否必填' }];}}}
}
</script>