# form-item组件
# 基本结构
<template>
<div class="xc-form-item">
<label class="xc-form-item__label" :style="{width: this.Form.labelWidth}">{{label}}</label>
<div class="xc-form-item__content">
<slot></slot>
</div>
</div>
</template>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 样式
<style lang="scss" scoped>
.xc-form-item {
margin-bottom: 25px;
.xc-form-item__label {
text-align: right;
vertical-align: middle;
float:left;
font-size: 14px;
color:#606266;
line-height: 40px;
padding:0 12px 0 0;
box-sizing: border-box;
}
.xc-form-item__content {
line-height: 40px;
position: relative;
font-size: 14px;
overflow: hidden;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# props
props: {
label:String
},
inject:['Form']
1
2
3
4
2
3
4