@longhongguo/form-create-ant-design-vue 3.2.94 → 3.2.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.2.94",
+  "version": "3.2.95",
   "description": "AntDesignVue版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。",
   "main": "./dist/form-create.min.js",
   "module": "./dist/form-create.esm.js",

package/src/parsers/flex.js

@@ -110,15 +110,24 @@ export default {
       ctx.rule.children = []
     }
 
+    // 读取 childFlex 和 childWidth 配置，用于直接设置到子元素的 style
+    const childFlex = props.childFlex ?? ctx.rule.childFlex
+    const isVertical =
+      flexDirection === 'column' || flexDirection === 'column-reverse'
+    const childWidth = isVertical
+      ? props.childWidth ?? ctx.rule.childWidth ?? '100%'
+      : undefined
+
     // 为 flex 容器的所有子组件设置 col: false，避免被 a-col 包装
+    // 同时直接给子元素设置 flex 值和宽度（如果是垂直方向）
     // 这样可以确保子组件直接作为 flex 子项，而不是占满整行
     if (ctx.rule.children && Array.isArray(ctx.rule.children)) {
       ctx.rule.children.forEach((child) => {
         if (
           child &&
           typeof child === 'object' &&
-          !child.type === 'DragTool' &&
-          !child.type === 'DragBox'
+          child.type !== 'DragTool' &&
+          child.type !== 'DragBox'
         ) {
           // 只有当 col 未设置或为默认值时才设置
           if (child.col === undefined || child.col === null) {
@@ -130,6 +139,29 @@ export default {
           ) {
             child.col.show = false
           }
+
+          // 确保子元素的 style 对象存在（使用响应式的方式）
+          if (!child.style) {
+            child.style = {}
+          }
+
+          // 如果配置了 childFlex，直接给子元素设置 flex 样式
+          // 使用 Object.assign 确保样式对象被正确设置
+          if (
+            childFlex !== undefined &&
+            childFlex !== null &&
+            childFlex !== ''
+          ) {
+            const flexValue = String(childFlex).trim()
+            // 直接设置 flex 属性，确保样式能够生效
+            Object.assign(child.style, { flex: flexValue })
+          }
+
+          // 如果是垂直方向且配置了 childWidth，直接给子元素设置 width 样式
+          if (isVertical && childWidth) {
+            const widthValue = String(childWidth).trim()
+            Object.assign(child.style, { width: widthValue })
+          }
         }
       })
     }
@@ -145,9 +177,10 @@ export default {
       if (typeof ctx.rule.wrap === 'object' && !ctx.rule.wrap.class) {
         ctx.rule.wrap.class = ''
       }
-      const wrapClass = typeof ctx.rule.wrap === 'object' 
-        ? (ctx.rule.wrap.class || '').split(' ').filter(Boolean)
-        : []
+      const wrapClass =
+        typeof ctx.rule.wrap === 'object'
+          ? (ctx.rule.wrap.class || '').split(' ').filter(Boolean)
+          : []
       if (!wrapClass.includes('_fc-reset-margin-bottom')) {
         wrapClass.push('_fc-reset-margin-bottom')
         if (typeof ctx.rule.wrap === 'object') {

package/src/style/index.css

@@ -524,12 +524,22 @@
   width: auto !important;
 }
 
-/* Flex 容器子项 flex 样式 */
+/* Flex 容器子项 flex 样式 - 使用通用选择器，匹配所有直接子元素 */
+.ant-flex._fc-flex-container > * {
+  flex: var(--fc-child-flex) !important;
+}
+
+/* 更具体的选择器，针对被 form-item 包裹的子元素 */
 .ant-flex._fc-flex-container > .ant-form-item {
   flex: var(--fc-child-flex) !important;
 }
 
-/* 垂直方向的 Flex 容器子项宽度样式 */
+/* 垂直方向的 Flex 容器子项宽度样式 - 使用通用选择器 */
+.ant-flex._fc-flex-vertical > * {
+  width: var(--fc-child-width, 100%) !important;
+}
+
+/* 更具体的选择器，针对被 form-item 包裹的子元素 */
 .ant-flex._fc-flex-vertical > .ant-form-item {
   width: var(--fc-child-width, 100%) !important;
 }