frontend / zee

Download as
Browse Code »

Commit 9b4ae7dab43f4374a6d5051f0df3ee84e776030f

Authored by 刘汉宸
1 parent aa5aca16
Exists in master and in 3 other branches 1.x, Feature-渲染优化, Refactor-2.0

feat: 新增Form组件配置项slot支持

Showing 2 changed files with 51 additions and 27 deletions   Show diff stats
packages/form/form-render.vue
  Diff comments   View file @9b4ae7d
... ... @@ -9,6 +9,7 @@
9 9 :key="index"
10 10 :span="type === 'div' ? undefined : item.group.span || 24"
11 11 :style="{ width: type === 'div' ? '100%' : undefined }"
  12 + :class="colClassRender(item, index, colClass)"
12 13 >
13 14 <component :is="rowComponent" class="zee-form__flex-wrap" :class="groupClass || 'zee-form__group'">
14 15 <!-- 表单分组标题 -->
... ... @@ -41,34 +42,38 @@
41 42 :span="type === 'div' ? undefined : item.span || span"
42 43 :key="index"
43 44 :style="{ width: type === 'div' && item.style && item.style.width.includes('%') ? item.style.width : undefined, paddingRight: '10px' }"
  45 + :class="colClassRender(item, index, colClass)"
44 46 >
45 47 <el-form-item :label="item.label" :label-width="item.labelWidth" :prop="item.fullKey" :rules="item.rules" :class="itemClass || 'zee-form__item'">
46   - <!-- 自定义组件 -->
47   - <dynamic-render
48   - v-if="typeof item.type === 'function'"
49   - :render="
50   - item.type($createElement, {
51   - model: value,
52   - config: {
53   - props: { ...item.props, value: itemValue(item) },
54   - style: item.style || { maxWidth: '100%' },
55   - on: {
56   - ...bindItemEvent(item),
57   - input: v => onInput({ value: v, item }),
  48 + <slot v-if="$slots[item.fullKey]" :name="item.fullKey" :value="itemValue(item)" :model="value"></slot>
  49 + <template v-else>
  50 + <!-- 自定义组件 -->
  51 + <dynamic-render
  52 + v-if="typeof item.type === 'function'"
  53 + :render="
  54 + item.type($createElement, {
  55 + model: value,
  56 + config: {
  57 + props: { ...item.props, value: itemValue(item) },
  58 + style: item.style || { maxWidth: '100%' },
  59 + on: {
  60 + ...bindItemEvent(item),
  61 + input: v => onInput({ value: v, item }),
  62 + },
58 63 },
59   - },
60   - })
61   - "
62   - ></dynamic-render>
63   - <component
64   - v-else
65   - :is="item.type"
66   - :value="itemValue(item)"
67   - @input="v => onInput({ value: v, item })"
68   - v-on="bindItemEvent(item)"
69   - v-bind="item.props"
70   - :style="item.style || { maxWidth: '100%' }"
71   - ></component>
  64 + })
  65 + "
  66 + ></dynamic-render>
  67 + <component
  68 + v-else
  69 + :is="item.type"
  70 + :value="itemValue(item)"
  71 + @input="v => onInput({ value: v, item })"
  72 + v-on="bindItemEvent(item)"
  73 + v-bind="item.props"
  74 + :style="item.style || { maxWidth: '100%' }"
  75 + ></component>
  76 + </template>
72 77 </el-form-item>
73 78 </component>
74 79 </template>
... ... @@ -89,6 +94,7 @@ export default {
89 94 titleClass: String,
90 95 contentClass: String,
91 96 itemClass: String,
  97 + colClass: [String, Function],
92 98 groupClass: String,
93 99 type: String,
94 100 span: Number,
... ... @@ -103,6 +109,20 @@ export default {
103 109 },
104 110 methods: {
105 111 /**
  112 + * @description 渲染col class
  113 + * @param {Object} item 表单项配置
  114 + * @param {Object} index 表单项渲染下标
  115 + * @param {Object} colClass 表单项配置
  116 + * @return {String} col class
  117 + */
  118 + colClassRender(item, index, colClass) {
  119 + if (colClass instanceof Function) {
  120 + return colClass(item, index);
  121 + } else {
  122 + return colClass;
  123 + }
  124 + },
  125 + /**
106 126 * @description 根据表单项的key查询该值
107 127 * @param {Object} item 表单项配置
108 128 * @returns {Any} 返回值
... ...
packages/form/index.vue
  Diff comments   View file @9b4ae7d
... ... @@ -21,6 +21,7 @@
21 21 :title-class="titleClass"
22 22 :content-class="contentClass"
23 23 :item-class="itemClass"
  24 + :col-class="colClass"
24 25 :group-class="groupClass"
25 26 :list="formList"
26 27 :value="model"
... ... @@ -30,7 +31,9 @@
30 31 @item-change="onItemChange"
31 32 @form-item-change="onFormItemChange"
32 33 @item-update="onItemUpdate"
33   - ></form-render>
  34 + >
  35 + <slot v-for="key in slotKeys" :name="key" :slot="key"></slot>
  36 + </form-render>
34 37 </el-form>
35 38 </template>
36 39  
... ... @@ -48,6 +51,7 @@ export default {
48 51 titleClass: String,
49 52 contentClass: String,
50 53 itemClass: String,
  54 + colClass: [String, Function],
51 55 groupClass: String,
52 56 labelWidth: String,
53 57 labelPosition: String,
... ... @@ -62,8 +66,8 @@ export default {
62 66 },
63 67 },
64 68 data() {
65   - // const $fullProps = { ...this.$attrs, ...this.$props };
66 69 return {
  70 + slotKeys: Object.keys(this.$slots),
67 71 model: {},
68 72 formModel: {},
69 73 formList: [],
... ...