@longhongguo/form-create-ant-design-vue 3.2.63 → 3.2.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longhongguo/form-create-ant-design-vue",
-  "version": "3.2.63",
+  "version": "3.2.64",
   "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

@@ -143,21 +143,34 @@ export default {
       prop.type = 'a-flex'
     }
 
-    // 读取 childFlex 配置
-    const childFlex = ctx.rule.props?.childFlex ?? ctx.rule.childFlex
-    if (childFlex !== undefined && childFlex !== null && childFlex !== '') {
-      // 给 flex 容器添加自定义 class 和 CSS 变量，用于 CSS 选择器
-      if (!prop.props) {
-        prop.props = {}
-      }
-      // 添加自定义 class
+    // 读取 flexDirection 来判断是否是垂直方向
+    const props = ctx.rule.props || {}
+    const flexDirection = props.flexDirection || ctx.rule.flexDirection || 'row'
+    const isVertical =
+      flexDirection === 'column' || flexDirection === 'column-reverse'
+
+    // 初始化 prop.props 和 prop.class（如果需要的话）
+    if (!prop.props) {
+      prop.props = {}
+    }
+
+    // 添加自定义 class 的辅助函数
+    const ensureClass = () => {
       if (!prop.class) {
         prop.class = []
       }
       if (!Array.isArray(prop.class)) {
         prop.class = [prop.class]
       }
-      prop.class.push('_fc-flex-container')
+    }
+
+    // 读取 childFlex 配置
+    const childFlex = ctx.rule.props?.childFlex ?? ctx.rule.childFlex
+    if (childFlex !== undefined && childFlex !== null && childFlex !== '') {
+      ensureClass()
+      if (!prop.class.includes('_fc-flex-container')) {
+        prop.class.push('_fc-flex-container')
+      }
 
       // 通过 CSS 变量传递 flex 值
       const flexValue = String(childFlex).trim()
@@ -174,6 +187,32 @@ export default {
       prop.style['--fc-child-flex'] = flexValue
     }
 
+    // 如果是垂直方向，读取 childWidth 配置（默认 100%）
+    if (isVertical) {
+      const childWidth =
+        ctx.rule.props?.childWidth ?? ctx.rule.childWidth ?? '100%'
+
+      ensureClass()
+      if (!prop.class.includes('_fc-flex-container')) {
+        prop.class.push('_fc-flex-container')
+      }
+      if (!prop.class.includes('_fc-flex-vertical')) {
+        prop.class.push('_fc-flex-vertical')
+      }
+
+      // 通过 CSS 变量传递宽度值
+      const widthValue = String(childWidth).trim()
+      if (!prop.props.style) {
+        prop.props.style = {}
+      }
+      prop.props.style['--fc-child-width'] = widthValue
+
+      if (!prop.style) {
+        prop.style = {}
+      }
+      prop.style['--fc-child-width'] = widthValue
+    }
+
     // children 会通过 form-create 的机制自动渲染
     const childrenNodes = children || []
 

package/src/style/index.css

@@ -496,3 +496,8 @@
 .ant-flex._fc-flex-container > .ant-form-item {
   flex: var(--fc-child-flex) !important;
 }
+
+/* 垂直方向的 Flex 容器子项宽度样式 */
+.ant-flex._fc-flex-vertical > .ant-form-item {
+  width: var(--fc-child-width, 100%) !important;
+}