尧图网站建设 
form-create-designer的config配置深度解析权限控制、菜单定制与拖拽限制的终极指南【免费下载链接】FcDesigner好用的Vue低代码可视化 AI 表单设计器可以通过拖拽的方式快速创建表单提高开发者对表单的开发效率。支持PC端和移动端目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。项目地址: https://gitcode.com/xaboy/form-create-designerfcDesignerform-create-designer是一款好用的 Vue 低代码可视化 AI 表单设计器通过拖拽方式快速创建表单支持 PC 端和移动端。它的config配置对象是定制设计器行为的核心入口权限控制谁能删、谁能改、菜单定制左侧组件列表怎么排、拖拽限制哪些组件能拖进哪里全部靠它一行行搞定。本文带你从新手视角用最少的代码读懂这套配置。一、config 是什么设计器的总开关在使用设计器时通过fc-designer :config...传入一个config对象即可控制设计器内模块的显示与默认规则。它的完整类型定义在 index.d.ts 中核心能力可以分成四大类配置类别代表配置项解决的问题️ 界面开关showAi、showPreviewBtn、showConfig隐藏不需要的按钮和面板 权限控制componentPermission、hiddenItemConfig精确控制组件可被删/复制/编辑的范围 菜单定制hiddenMenu、collapseMenu、hiddenItem裁剪左侧组件列表只留业务需要的️ 拖拽限制allowDrag、denyDrag、checkDrag规定组件可以拖入哪些容器 设计器主体逻辑位于 FcDesigner.vue内置的 40 组件规则在 config/index.js 中注册菜单分组定义在 menu.js基础组件、子表单组件、辅助组件、布局组件四大分组。二、权限控制用 componentPermission 锁定不可动的组件这是很多政企项目上线前的刚需某些组件比如固定展示项不允许删除、复制甚至不允许修改样式。2.1 匹配目标field / name / tag / id 四种方式componentPermission是一个数组每一条规则先用field、name、id_fc_id、tag_fc_drag_tag四个维度之一匹配到组件支持字符串或字符串数组命中后应用其permission权限。匹配逻辑源码见 getPermission。2.2 权限清单精细到能否切换组件类型permission对象中的每一项设为false即禁止该操作操作权限delete删除、copy复制、move拖动配置面板权限base基础配置、props属性配置、style样式、validate验证、event事件类型切换switchType设为false时右侧组件类型下拉会被禁用配置项级权限hiddenConfig/disabledConfig可以隐藏或禁用基础/属性面板里的指定字段一个典型场景config: { componentPermission: [ { field: fixedTitle, // 按 field 匹配 permission: { delete: false, move: false, style: false } } ] }这样field为fixedTitle的组件就锁死了删不掉、拖不走、改不了样式。2.3 全局配置项隐藏/禁用hiddenItemConfig如果想让所有组件都不出现某个配置项例如统一隐藏disabled选项不需要逐个写权限直接用hiddenItemConfig按拖拽规则name分类配置default对全部组件生效与权限里的hiddenConfig会自动合并去重源码见 FcDesigner.vueconfig: { hiddenItemConfig: { default: [placeholder], // 所有组件隐藏 placeholder input: [maxlength] // 仅输入框隐藏 maxlength } }三、菜单定制打造只属于你业务的组件库3.1 最快隐藏方法hiddenMenu 与 hiddenItem默认菜单分四大类基础/子表单/辅助/布局定义见 menu.js。新手最常用的两个配置hiddenMenu: [subform]隐藏整个子表单组件分组hiddenItem: [signaturePad, editor]只隐藏个别组件collapseMenu: [layout]指定分组默认收起减少左侧列表高度三者都是做减法几行配置就能把通用设计器裁剪成业务专用设计器。3.2 完全接管菜单menu 属性与 addMenu需要更彻底的定制时有两级方案menu属性直接传入自定义菜单列表覆盖默认菜单类型见 MenuaddMenu/setMenuItem方法通过组件实例在默认菜单上追加或替换指定分组自定义菜单里每个组件条目只需要三要素name唯一 id、label显示名、icon图标再配合rule()函数返回 form-create 渲染规则即可——可参考内置的 input.js 作为模板。菜单列表的构建逻辑在 menuList 计算属性。四、拖拽限制allowDrag 与 denyDrag 的判定顺序表单布局中常遇到Tab 页里不能塞 Tab、卡片里只能放输入框这类约束。设计器提供了两层机制组件级写在拖拽规则的allowDrag/denyDrag中和全局级写在config里按目标组件name配置。4.1 两种写法数组或菜单组件组合// 写法一只按组件名 config: { allowDrag: { card: [input, select] } } // 写法二按菜单分组 组件名 config: { denyDrag: { tabPane: { menu: [layout], item: [table] } } }4.2 判定优先级新手必知的白名单优先规则判定逻辑在 checkAllowDrag顺序是目标组件allowDrag白名单命中 →允许全局allowDrag命中 →允许存在allowDrag但没命中→拒绝denyDrag黑名单命中 →拒绝都不涉及 →允许一句话总结有白名单时按白名单没白名单才看黑名单。4.3 终极手段checkDrag 函数需要复杂判断比如同一表单里某组件只能放一个时用config.checkDrag接收{ rule, menu, toRule, toMenu }返回false即阻止拖入。设计器还内置了only: true的唯一性约束如 Tabs 只能拖入一个命中会提示表单中只能存在一个XX源码见 checkOnly。组件规则上的maxChildren则用于控制最多拖入几个子组件。五、界面开关与默认值常用 show 配置速查表以下开关默认均为显示设为false即关闭读取逻辑见 getConfig配置说明showMenuBar左侧功能栏菜单/多语言/JSON/AI 入口showAiAI 表单助理入口showJsonPreviewJSON 预览入口showPreviewBtn/showSaveBtn顶部预览 / 保存按钮保存默认隐藏showDevicePC/Pad/手机多端切换showInputData表单数据录入开关showConfig右侧整个配置面板showBaseForm/showPropsForm/showStyleForm/showValidateForm/showEventForm右侧五个配置分区此外还有两个防误改配置fieldReadonly和nameReadonly分别锁定组件field和name不可编辑适合对接已有后端字段的场景。想统一改组件初始值则用updateDefaultRule想自定义右侧配置面板的字段用baseRule/componentRule/formRule覆盖或追加渲染规则。六、上手建议三步定制你的设计器先裁剪用hiddenMenuhiddenItem把用不到的组件藏掉左侧菜单立刻清爽再上锁对核心固定组件配置componentPermission禁止删除、拖动和样式修改最后限拖用allowDrag/denyDrag声明布局容器的白名单复杂场景交给checkDrag⚠️ 三个版本的包配置体系完全一致packages/element-uiElement Plus、packages/vant移动端、packages/ant-design-vueAnt Design Vue本文结论对三端通用。掌握config之后同一套设计器可以为不同业务线输出完全不同的专属表单工作台——这正是 form-create-designer 在政务、OA、ERP 等系统中稳定落地的关键。【免费下载链接】FcDesigner好用的Vue低代码可视化 AI 表单设计器可以通过拖拽的方式快速创建表单提高开发者对表单的开发效率。支持PC端和移动端目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。项目地址: https://gitcode.com/xaboy/form-create-designer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 form-create-designer的config配置深度解析：权限控制、菜单定制与拖拽限制的终极指南
form-create-designer的config配置深度解析权限控制、菜单定制与拖拽限制的终极指南【免费下载链接】FcDesigner好用的Vue低代码可视化 AI 表单设计器可以通过拖拽的方式快速创建表单提高开发者对表单的开发效率。支持PC端和移动端目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。项目地址: https://gitcode.com/xaboy/form-create-designerfcDesignerform-create-designer是一款好用的 Vue 低代码可视化 AI 表单设计器通过拖拽方式快速创建表单支持 PC 端和移动端。它的config配置对象是定制设计器行为的核心入口权限控制谁能删、谁能改、菜单定制左侧组件列表怎么排、拖拽限制哪些组件能拖进哪里全部靠它一行行搞定。本文带你从新手视角用最少的代码读懂这套配置。一、config 是什么设计器的总开关在使用设计器时通过fc-designer :config...传入一个config对象即可控制设计器内模块的显示与默认规则。它的完整类型定义在 index.d.ts 中核心能力可以分成四大类配置类别代表配置项解决的问题️ 界面开关showAi、showPreviewBtn、showConfig隐藏不需要的按钮和面板 权限控制componentPermission、hiddenItemConfig精确控制组件可被删/复制/编辑的范围 菜单定制hiddenMenu、collapseMenu、hiddenItem裁剪左侧组件列表只留业务需要的️ 拖拽限制allowDrag、denyDrag、checkDrag规定组件可以拖入哪些容器 设计器主体逻辑位于 FcDesigner.vue内置的 40 组件规则在 config/index.js 中注册菜单分组定义在 menu.js基础组件、子表单组件、辅助组件、布局组件四大分组。二、权限控制用 componentPermission 锁定不可动的组件这是很多政企项目上线前的刚需某些组件比如固定展示项不允许删除、复制甚至不允许修改样式。2.1 匹配目标field / name / tag / id 四种方式componentPermission是一个数组每一条规则先用field、name、id_fc_id、tag_fc_drag_tag四个维度之一匹配到组件支持字符串或字符串数组命中后应用其permission权限。匹配逻辑源码见 getPermission。2.2 权限清单精细到能否切换组件类型permission对象中的每一项设为false即禁止该操作操作权限delete删除、copy复制、move拖动配置面板权限base基础配置、props属性配置、style样式、validate验证、event事件类型切换switchType设为false时右侧组件类型下拉会被禁用配置项级权限hiddenConfig/disabledConfig可以隐藏或禁用基础/属性面板里的指定字段一个典型场景config: { componentPermission: [ { field: fixedTitle, // 按 field 匹配 permission: { delete: false, move: false, style: false } } ] }这样field为fixedTitle的组件就锁死了删不掉、拖不走、改不了样式。2.3 全局配置项隐藏/禁用hiddenItemConfig如果想让所有组件都不出现某个配置项例如统一隐藏disabled选项不需要逐个写权限直接用hiddenItemConfig按拖拽规则name分类配置default对全部组件生效与权限里的hiddenConfig会自动合并去重源码见 FcDesigner.vueconfig: { hiddenItemConfig: { default: [placeholder], // 所有组件隐藏 placeholder input: [maxlength] // 仅输入框隐藏 maxlength } }三、菜单定制打造只属于你业务的组件库3.1 最快隐藏方法hiddenMenu 与 hiddenItem默认菜单分四大类基础/子表单/辅助/布局定义见 menu.js。新手最常用的两个配置hiddenMenu: [subform]隐藏整个子表单组件分组hiddenItem: [signaturePad, editor]只隐藏个别组件collapseMenu: [layout]指定分组默认收起减少左侧列表高度三者都是做减法几行配置就能把通用设计器裁剪成业务专用设计器。3.2 完全接管菜单menu 属性与 addMenu需要更彻底的定制时有两级方案menu属性直接传入自定义菜单列表覆盖默认菜单类型见 MenuaddMenu/setMenuItem方法通过组件实例在默认菜单上追加或替换指定分组自定义菜单里每个组件条目只需要三要素name唯一 id、label显示名、icon图标再配合rule()函数返回 form-create 渲染规则即可——可参考内置的 input.js 作为模板。菜单列表的构建逻辑在 menuList 计算属性。四、拖拽限制allowDrag 与 denyDrag 的判定顺序表单布局中常遇到Tab 页里不能塞 Tab、卡片里只能放输入框这类约束。设计器提供了两层机制组件级写在拖拽规则的allowDrag/denyDrag中和全局级写在config里按目标组件name配置。4.1 两种写法数组或菜单组件组合// 写法一只按组件名 config: { allowDrag: { card: [input, select] } } // 写法二按菜单分组 组件名 config: { denyDrag: { tabPane: { menu: [layout], item: [table] } } }4.2 判定优先级新手必知的白名单优先规则判定逻辑在 checkAllowDrag顺序是目标组件allowDrag白名单命中 →允许全局allowDrag命中 →允许存在allowDrag但没命中→拒绝denyDrag黑名单命中 →拒绝都不涉及 →允许一句话总结有白名单时按白名单没白名单才看黑名单。4.3 终极手段checkDrag 函数需要复杂判断比如同一表单里某组件只能放一个时用config.checkDrag接收{ rule, menu, toRule, toMenu }返回false即阻止拖入。设计器还内置了only: true的唯一性约束如 Tabs 只能拖入一个命中会提示表单中只能存在一个XX源码见 checkOnly。组件规则上的maxChildren则用于控制最多拖入几个子组件。五、界面开关与默认值常用 show 配置速查表以下开关默认均为显示设为false即关闭读取逻辑见 getConfig配置说明showMenuBar左侧功能栏菜单/多语言/JSON/AI 入口showAiAI 表单助理入口showJsonPreviewJSON 预览入口showPreviewBtn/showSaveBtn顶部预览 / 保存按钮保存默认隐藏showDevicePC/Pad/手机多端切换showInputData表单数据录入开关showConfig右侧整个配置面板showBaseForm/showPropsForm/showStyleForm/showValidateForm/showEventForm右侧五个配置分区此外还有两个防误改配置fieldReadonly和nameReadonly分别锁定组件field和name不可编辑适合对接已有后端字段的场景。想统一改组件初始值则用updateDefaultRule想自定义右侧配置面板的字段用baseRule/componentRule/formRule覆盖或追加渲染规则。六、上手建议三步定制你的设计器先裁剪用hiddenMenuhiddenItem把用不到的组件藏掉左侧菜单立刻清爽再上锁对核心固定组件配置componentPermission禁止删除、拖动和样式修改最后限拖用allowDrag/denyDrag声明布局容器的白名单复杂场景交给checkDrag⚠️ 三个版本的包配置体系完全一致packages/element-uiElement Plus、packages/vant移动端、packages/ant-design-vueAnt Design Vue本文结论对三端通用。掌握config之后同一套设计器可以为不同业务线输出完全不同的专属表单工作台——这正是 form-create-designer 在政务、OA、ERP 等系统中稳定落地的关键。【免费下载链接】FcDesigner好用的Vue低代码可视化 AI 表单设计器可以通过拖拽的方式快速创建表单提高开发者对表单的开发效率。支持PC端和移动端目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。项目地址: https://gitcode.com/xaboy/form-create-designer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考