chore(lib): formFooter 添加formItemAttrs参数透传给footer 内 formItem

Author: lljj-x

packages/demo/demo-v2/src/pages/index/views/Demo/index.vue

@@ -202,7 +202,7 @@ const VueIview3Form = async () => {
     // eslint-disable-next-line
     const [iview, ivewForm] = await Promise.all([
         import('demo-common/components/iView/index.js'),
-        import('@lljj/vue2-form-iview3/src/index')
+        import('@lljj/vue2-form-iview3')
     ]);
 
     return ivewForm;

packages/demo/demo-v3/src/pages/index/views/Demo/index.vue

@@ -20,7 +20,7 @@
                     <span style="font-size: 13px;">labelCol：</span>
                     <el-slider
                         v-model="formProps.labelColSpan"
-                        :min="5"
+                        :min="3"
                         :max="15"
                         style="width: 70px; margin-right: 6px;"
                         size="mini"
@@ -29,7 +29,7 @@
                     <el-slider
                         v-model="formProps.wrapperColSpan"
                         :min="5"
-                        :max="15"
+                        :max="24"
                         style="width: 70px; margin-right: 6px;"
                         size="mini"
                     ></el-slider>
@@ -308,7 +308,19 @@ export default {
             };
         },
         trueFormFooter() {
-            return this.formFooter || {};
+            const {
+                labelColSpan,
+                wrapperColSpan
+            } = this.formProps;
+
+            return this.isUseLabelWidth ? (this.formFooter || {}) : {
+                formItemAttrs: {
+                    wrapperCol: {
+                        span: wrapperColSpan,
+                        offset: labelColSpan
+                    }
+                }
+            };
         },
         curType() {
             return this.$route.query.type || 'Simple';
@@ -394,7 +406,7 @@ export default {
                     labelColSpan: 10,
                     wrapperColSpan: 12,
                     layoutColumn: 1
-                }
+                },
             };
         },
         genCodeStrComputedGetter(vmKey) {

packages/docs/docs/zh/guide/basic-config.md

@@ -610,7 +610,11 @@ export default {
 formFooter = {
     show: true, // 是否显示默认底部
     okBtn: '保存', // 确认按钮文字
-    cancelBtn: '取消' // 取消按钮文字
+    cancelBtn: '取消', // 取消按钮文字
+
+    // 透传给formFooter 中的formItem组件的参数
+    // 例如 vue3-ant 配置wrapperCol  formItemAttrs = { wrapperCol: { span: 10, offset: 5 }}
+    formItemAttrs: {}
 }
 ```
 

packages/lib/vue2/vue2-core/src/components/FormFooter.js

@@ -13,6 +13,10 @@ export default {
             type: String,
             default: '取消'
         },
+        formItemAttrs: {
+            type: Object,
+            default: () => ({})
+        },
         globalOptions: null
     },
     render(h) {
@@ -22,7 +26,8 @@ export default {
         return h(COMPONENT_MAP.formItem, {
             class: {
                 formFooter_item: true
-            }
+            },
+            ...this.formItemAttrs
         }, [
             h(COMPONENT_MAP.button, {
                 on: {

packages/lib/vue2/vue2-core/src/index.js

@@ -110,6 +110,7 @@ export default function createForm(globalOptions = {}) {
                             globalOptions,
                             okBtn: self.footerParams.okBtn,
                             cancelBtn: self.footerParams.cancelBtn,
+                            formItemAttrs: self.footerParams.formItemAttrs,
                         },
                         on: {
                             onCancel() {

packages/lib/vue2/vue2-form-element/dist/vueJsonSchemaForm.esm.js

@@ -9407,6 +9407,12 @@ var FormFooter = {
       type: String,
       default: '取消'
     },
+    formItemAttrs: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
     globalOptions: null
   },
   render: function render(h) {
@@ -9415,11 +9421,11 @@ var FormFooter = {
         okBtn = _this$$props.okBtn,
         cancelBtn = _this$$props.cancelBtn,
         COMPONENT_MAP = _this$$props.globalOptions.COMPONENT_MAP;
-    return h(COMPONENT_MAP.formItem, {
+    return h(COMPONENT_MAP.formItem, _objectSpread2({
       class: {
         formFooter_item: true
       }
-    }, [h(COMPONENT_MAP.button, {
+    }, this.formItemAttrs), [h(COMPONENT_MAP.button, {
       on: {
         click: function click() {
           self.$emit('onCancel');
@@ -11594,7 +11600,8 @@ function createForm() {
         props: {
           globalOptions: globalOptions,
           okBtn: self.footerParams.okBtn,
-          cancelBtn: self.footerParams.cancelBtn
+          cancelBtn: self.footerParams.cancelBtn,
+          formItemAttrs: self.footerParams.formItemAttrs
         },
         on: {
           onCancel: function onCancel() {

packages/lib/vue2/vue2-form-element/dist/vueJsonSchemaForm.esm.min.js

@@ -9415,6 +9415,12 @@
         type: String,
         default: '取消'
       },
+      formItemAttrs: {
+        type: Object,
+        default: function _default() {
+          return {};
+        }
+      },
       globalOptions: null
     },
     render: function render(h) {
@@ -9423,11 +9429,11 @@
           okBtn = _this$$props.okBtn,
           cancelBtn = _this$$props.cancelBtn,
           COMPONENT_MAP = _this$$props.globalOptions.COMPONENT_MAP;
-      return h(COMPONENT_MAP.formItem, {
+      return h(COMPONENT_MAP.formItem, _objectSpread2({
         class: {
           formFooter_item: true
         }
-      }, [h(COMPONENT_MAP.button, {
+      }, this.formItemAttrs), [h(COMPONENT_MAP.button, {
         on: {
           click: function click() {
             self.$emit('onCancel');
@@ -11602,7 +11608,8 @@
           props: {
             globalOptions: globalOptions,
             okBtn: self.footerParams.okBtn,
-            cancelBtn: self.footerParams.cancelBtn
+            cancelBtn: self.footerParams.cancelBtn,
+            formItemAttrs: self.footerParams.formItemAttrs
           },
           on: {
             onCancel: function onCancel() {

packages/lib/vue2/vue2-form-element/dist/vueJsonSchemaForm.umd.js

@@ -9407,6 +9407,12 @@ var FormFooter = {
       type: String,
       default: '取消'
     },
+    formItemAttrs: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
     globalOptions: null
   },
   render: function render(h) {
@@ -9415,11 +9421,11 @@ var FormFooter = {
         okBtn = _this$$props.okBtn,
         cancelBtn = _this$$props.cancelBtn,
         COMPONENT_MAP = _this$$props.globalOptions.COMPONENT_MAP;
-    return h(COMPONENT_MAP.formItem, {
+    return h(COMPONENT_MAP.formItem, _objectSpread2({
       class: {
         formFooter_item: true
       }
-    }, [h(COMPONENT_MAP.button, {
+    }, this.formItemAttrs), [h(COMPONENT_MAP.button, {
       on: {
         click: function click() {
           self.$emit('onCancel');
@@ -11594,7 +11600,8 @@ function createForm() {
         props: {
           globalOptions: globalOptions,
           okBtn: self.footerParams.okBtn,
-          cancelBtn: self.footerParams.cancelBtn
+          cancelBtn: self.footerParams.cancelBtn,
+          formItemAttrs: self.footerParams.formItemAttrs
         },
         on: {
           onCancel: function onCancel() {