inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <div :class="[prefixCls, lastCls, blockCls, gridCls]">
3     <div v-if="title" class="antd-pro-components-standard-form-row-index-label">
4       <span>{{ title }}</span>
5     </div>
6     <div class="antd-pro-components-standard-form-row-index-content">
7       <slot></slot>
8     </div>
9   </div>
10 </template>
11
12 <script>
13 const classes = [
14   'antd-pro-components-standard-form-row-index-standardFormRowBlock',
15   'antd-pro-components-standard-form-row-index-standardFormRowGrid',
16   'antd-pro-components-standard-form-row-index-standardFormRowLast'
17 ]
18 export default {
19   name: 'StandardFormRow',
20   props: {
21     prefixCls: {
22       type: String,
23       default: 'antd-pro-components-standard-form-row-index-standardFormRow'
24     },
25     title: {
26       type: String,
27       default: undefined
28     },
29     last: {
30       type: Boolean
31     },
32     block: {
33       type: Boolean
34     },
35     grid: {
36       type: Boolean
37     }
38   },
39   computed: {
40     lastCls () {
41       return this.last ? classes[2] : null
42     },
43     blockCls () {
44       return this.block ? classes[0] : null
45     },
46     gridCls () {
47       return this.grid ? classes[1] : null
48     }
49   }
50 }
51 </script>
52
53 <style lang="less" scoped>
54 @import '../index.less';
55
56 .antd-pro-components-standard-form-row-index-standardFormRow {
57   display: flex;
58   margin-bottom: 16px;
59   padding-bottom: 16px;
60   border-bottom: 1px dashed @border-color-split;
61
62   /deep/ .ant-form-item {
63     margin-right: 24px;
64   }
65   /deep/ .ant-form-item-label label {
66     margin-right: 0;
67     color: @text-color;
68   }
69   /deep/ .ant-form-item-label,
70   .ant-form-item-control {
71     padding: 0;
72     line-height: 32px;
73   }
74
75   .antd-pro-components-standard-form-row-index-label {
76     flex: 0 0 auto;
77     margin-right: 24px;
78     color: @heading-color;
79     font-size: @font-size-base;
80     text-align: right;
81     & > span {
82       display: inline-block;
83       height: 32px;
84       line-height: 32px;
85       &::after {
86         content: ':';
87       }
88     }
89   }
90
91   .antd-pro-components-standard-form-row-index-content {
92     flex: 1 1 0;
93     /deep/ .ant-form-item:last-child {
94       margin-right: 0;
95     }
96   }
97
98   &.antd-pro-components-standard-form-row-index-standardFormRowLast {
99     margin-bottom: 0;
100     padding-bottom: 0;
101     border: none;
102   }
103
104   &.antd-pro-components-standard-form-row-index-standardFormRowBlock {
105     /deep/ .ant-form-item,
106     div.ant-form-item-control-wrapper {
107       display: block;
108     }
109   }
110
111   &.antd-pro-components-standard-form-row-index-standardFormRowGrid {
112       /deep/ .ant-form-item,
113       div.ant-form-item-control-wrapper {
114         display: block;
115       }
116       /deep/ .ant-form-item-label {
117         float: left;
118       }
119   }
120 }
121
122 </style>