feat: 优化form响应式

liuhanchen
1 parent cf0e2f1a
Showing 2 changed files with 24 additions and 7 deletions Show diff stats
packages/form-item/index.vue
packages/form/index.vue
@@ -6,12 +6,12 @@ export default {
     labelWidth: String,
     value: [Number, String, Array, Boolean, Object],
     prop: String,
-    span: {
-      type: [Number, String],
-      default() {
-        return this.zForm ? this.zForm.span : undefined;
-      },
-    },
+    span: [Number, String],
+    xs: [Number, Object],
+    sm: [Number, Object],
+    md: [Number, Object],
+    lg: [Number, Object],
+    xl: [Number, Object],
   },
   provide() {
     return {
@@ -47,7 +47,7 @@ export default {
         }
       }
     }
-    return h('el-col', { props: { span: this.span ? Number(this.span) : undefined } }, [
+    return h('el-col', { props: this.colProps(['span', 'xs', 'sm', 'md', 'lg', 'xl']) }, [
       h(
         'el-form-item',
         {
@@ -58,5 +58,17 @@ export default {
       ),
     ]);
   },
+  methods: {
+    colProps(props) {
+      return props.reduce((result, key) => {
+        if (this[key]) {
+          result[key] = this[key];
+        } else {
+          result[key] = this.zForm ? this.zForm[key] : undefined;
+        }
+        return result;
+      }, {});
+    },
+  },
 };
 </script>
@@ -23,6 +23,11 @@ export default {
       },
     },
     span: [Number, String],
+    xs: [Number, Object],
+    sm: [Number, Object],
+    md: [Number, Object],
+    lg: [Number, Object],
+    xl: [Number, Object],
     itemComponent: String,
   },
   provide() {
...	...	@@ -6,12 +6,12 @@ export default {
6	6	labelWidth: String,
7	7	value: [Number, String, Array, Boolean, Object],
8	8	prop: String,
9		- span: {
10		- type: [Number, String],
11		- default() {
12		- return this.zForm ? this.zForm.span : undefined;
13		- },
14		- },
	9	+ span: [Number, String],
	10	+ xs: [Number, Object],
	11	+ sm: [Number, Object],
	12	+ md: [Number, Object],
	13	+ lg: [Number, Object],
	14	+ xl: [Number, Object],
15	15	},
16	16	provide() {
17	17	return {
...	...	@@ -47,7 +47,7 @@ export default {
47	47	}
48	48	}
49	49	}
50		- return h('el-col', { props: { span: this.span ? Number(this.span) : undefined } }, [
	50	+ return h('el-col', { props: this.colProps(['span', 'xs', 'sm', 'md', 'lg', 'xl']) }, [
51	51	h(
52	52	'el-form-item',
53	53	{
...	...	@@ -58,5 +58,17 @@ export default {
58	58	),
59	59	]);
60	60	},
	61	+ methods: {
	62	+ colProps(props) {
	63	+ return props.reduce((result, key) => {
	64	+ if (this[key]) {
	65	+ result[key] = this[key];
	66	+ } else {
	67	+ result[key] = this.zForm ? this.zForm[key] : undefined;
	68	+ }
	69	+ return result;
	70	+ }, {});
	71	+ },
	72	+ },
61	73	};
62	74	</script>
...	...
...	...	@@ -23,6 +23,11 @@ export default {
23	23	},
24	24	},
25	25	span: [Number, String],
	26	+ xs: [Number, Object],
	27	+ sm: [Number, Object],
	28	+ md: [Number, Object],
	29	+ lg: [Number, Object],
	30	+ xl: [Number, Object],
26	31	itemComponent: String,
27	32	},
28	33	provide() {
...	...