Skip to content

Commit dc2fd9a

Browse files
author
lkccy
committed
feat: 增加表单label 插槽
1 parent 96e3b78 commit dc2fd9a

File tree

10 files changed

+127
-8
lines changed

10 files changed

+127
-8
lines changed

‎app/views/test-common/const.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,16 @@ export const schema = [
1919
{
2020
type: 'input',
2121
prop: 'name',
22-
formItem: { label: '姓名' },
22+
formItem: { label: '电话' },
2323
attrs: { placeholder: '测试优先级' },
24-
colGrid: { span: 8 }
24+
colGrid: { span: 8 },
25+
labelSlot: 'inputName'
2526
}, {
2627
type: 'input',
2728
prop: 'age',
2829
formItem: { label: '年龄' },
29-
colGrid: { span: 8 }
30+
colGrid: { span: 8 },
31+
labelTooltip: '初三'
3032
}
3133
],
3234
[

‎app/views/test-common/index.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
:schema="formSchema"
77
:options="options"
88
>
9+
<div slot="inputName">
10+
<i class="el-icon-success"></i>
11+
</div>
912
</schema-form>
1013
</el-form>
1114
<div class="page-footer">

‎docs/.vuepress/components/code-contain.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ import SlotFront from './slot-front'
2828
import SlotRear from './slot-rear'
2929
import SlotSlot from './slot-slot'
3030
import SlotTool from './slot-tool'
31+
import SlotLabel from './slot-label'
32+
import SlotTooltip from './slot-tooltip'
3133
// 自定义组件
3234
import CustomInput from './custom-input'
3335
// 动态属性
@@ -56,7 +58,9 @@ export default {
5658
CustomInput,
5759
DynamicInput,
5860
ExpandCodeMirror,
59-
SlotTool
61+
SlotTool,
62+
SlotTooltip,
63+
SlotLabel
6064
},
6165
data () {
6266
return {

‎docs/.vuepress/components/slot-label.vue

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<el-form size="small" label-position="left" label-width="90px" class="slot-tool">
3+
<schema-form
4+
:model="model"
5+
:schema="schema"
6+
>
7+
<span slot="ageName">
8+
标签插槽
9+
</span>
10+
</schema-form>
11+
</el-form>
12+
</template>
13+
14+
<script>
15+
export default {
16+
data () {
17+
return {
18+
model: {
19+
name: ''
20+
},
21+
schema: [
22+
[
23+
{
24+
type: 'input',
25+
prop: 'name',
26+
frontHtml: '近',
27+
labelSlot: 'ageName',
28+
formItem: { },
29+
rearHtml: '天'
30+
}
31+
]
32+
]
33+
}
34+
}
35+
}
36+
</script>
37+
38+
<style >
39+
.slot-tool .el-input {
40+
width: auto;
41+
}
42+
</style>

‎docs/.vuepress/components/slot-tool.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default {
2020
{
2121
type: 'input',
2222
prop: 'name',
23-
frontHtml: '<span><i class="el-icon-warning" />近</span>',
23+
frontHtml: '近',
2424
formItem: { label: '店铺年龄' },
2525
rearHtml: '天'
2626
}

‎docs/.vuepress/components/slot-tooltip.vue

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<el-form size="small" label-position="left" label-width="90px" class="slot-tool">
3+
<schema-form
4+
:model="model"
5+
:schema="schema"
6+
>
7+
</schema-form>
8+
</el-form>
9+
</template>
10+
11+
<script>
12+
export default {
13+
data () {
14+
return {
15+
model: {
16+
name: ''
17+
},
18+
schema: [
19+
[
20+
{
21+
type: 'input',
22+
prop: 'name',
23+
frontHtml: '近',
24+
formItem: { label: '店铺年龄' },
25+
rearHtml: '天',
26+
labelTooltip: '统计自营店铺'
27+
}
28+
]
29+
]
30+
}
31+
}
32+
}
33+
</script>
34+
35+
<style >
36+
.slot-tool .el-input {
37+
width: auto;
38+
}
39+
</style>

‎docs/guide/component/schema.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,5 +125,6 @@ on: {
125125
参数|说明|
126126
:--|:--
127127
slot| 自定义完整组件
128+
labelSlot| 用于 el-form-item 中的 label插槽
128129
frontSlot| 定义element 组件前的插槽
129130
rearSlot| 定义element 组件后的插槽

‎docs/guide/component/slot.md

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,34 @@
11
### 插槽
22

3-
<code-contain compName="SlotSlot" link="https://codesandbox.io/s/chacao-697j3?fontsize=14">
3+
<code-contain compName="SlotSlot" link="https://codesandbox.io/s/chacao-697j3?fontsize=14">
44
<<< @/docs/.vuepress/components/slot-slot.vue
55
</code-contain>
66

77
### 前置插槽
88

9-
<code-contain compName="SlotFront" link="https://codesandbox.io/s/qianzhichacao-5phtv?fontsize=14">
9+
<code-contain compName="SlotFront" link="https://codesandbox.io/s/qianzhichacao-5phtv?fontsize=14">
1010
<<< @/docs/.vuepress/components/slot-front.vue
1111
</code-contain>
1212

1313
### 后置插槽
1414

15-
<code-contain compName="SlotRear" link="https://codesandbox.io/s/houzhichacao-vrkco?fontsize=14">
15+
<code-contain compName="SlotRear" link="https://codesandbox.io/s/houzhichacao-vrkco?fontsize=14">
1616
<<< @/docs/.vuepress/components/slot-rear.vue
1717
</code-contain>
1818

19+
20+
### 标签插槽
21+
22+
<code-contain compName="SlotLabel">
23+
<<< @/docs/.vuepress/components/slot-label.vue
24+
</code-contain>
25+
1926
### 自定义前置/后置文本
2027
<code-contain compName="SlotTool">
2128
<<< @/docs/.vuepress/components/slot-tool.vue
29+
</code-contain>
30+
31+
### 自定义标题说明
32+
<code-contain compName="SlotTooltip">
33+
<<< @/docs/.vuepress/components/slot-tooltip.vue
2234
</code-contain>

‎src/packages/SchemaForm.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
:options="options"
2020
v-on="$listeners"
2121
>
22+
<slot v-if="col.labelSlot" :name="col.labelSlot" :slot="col.labelSlot"></slot>
2223
<slot v-if="col.frontSlot" :name="col.frontSlot" :slot="col.frontSlot"></slot>
2324
<slot v-if="col.rearSlot" :name="col.rearSlot" :slot="col.rearSlot"></slot>
2425
</schema-form-item>

‎src/packages/SchemaFormItem.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
<template>
22
<el-form-item :prop="col.prop" v-bind="col.formItem" class="schema-form-item">
3+
<template slot="label" v-if="col.labelSlot">
4+
<slot :name="col.labelSlot"></slot>
5+
</template>
6+
<template slot="label" v-if="col.labelTooltip">
7+
<span class="schema-label">{{ labelContent }}</span>
8+
<el-tooltip :content="col.labelTooltip">
9+
<i class="el-icon-warning"></i>
10+
</el-tooltip>
11+
</template>
312
<span v-if="col.frontHtml" v-html="col.frontHtml" />
413
<slot :name="col.frontSlot" v-if="col.frontSlot"></slot>
514
<component
@@ -39,6 +48,12 @@ export default {
3948
'rate', 'switch', 'colorpicker', 'tags', 'progress']
4049
}
4150
},
51+
computed: {
52+
labelContent () {
53+
let _formItem = this.col.formItem || {}
54+
return _formItem.label || ''
55+
}
56+
},
4257
methods: {
4358
// 组件名称
4459
getComponentName (type) {

0 commit comments

Comments
 (0)