inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <div :class="['description-list', size, layout === 'vertical' ? 'vertical': 'horizontal']">
3     <div v-if="title" class="title">{{ title }}</div>
4     <a-row>
5       <slot></slot>
6     </a-row>
7   </div>
8 </template>
9
10 <script>
11 import { Col } from 'ant-design-vue/es/grid/'
12
13 const Item = {
14   name: 'DetailListItem',
15   props: {
16     term: {
17       type: String,
18       default: '',
19       required: false
20     }
21   },
22   inject: {
23     col: {
24       type: Number
25     }
26   },
27   render () {
28     return (
29       <Col {...{ props: responsive[this.col] }}>
30         <div class="term">{this.$props.term}</div>
31         <div class="content">{this.$slots.default}</div>
32       </Col>
33     )
34   }
35 }
36
37 const responsive = {
38   1: { xs: 24 },
39   2: { xs: 24, sm: 12 },
40   3: { xs: 24, sm: 12, md: 8 },
41   4: { xs: 24, sm: 12, md: 6 }
42 }
43
44 export default {
45   name: 'DetailList',
46   Item: Item,
47   components: {
48     Col
49   },
50   props: {
51     title: {
52       type: String,
53       default: '',
54       required: false
55     },
56     col: {
57       type: Number,
58       required: false,
59       default: 3
60     },
61     size: {
62       type: String,
63       required: false,
64       default: 'large'
65     },
66     layout: {
67       type: String,
68       required: false,
69       default: 'horizontal'
70     }
71   },
72   provide () {
73     return {
74       col: this.col > 4 ? 4 : this.col
75     }
76   }
77 }
78 </script>
79
80 <style lang="less" scoped>
81
82   .description-list {
83
84     .title {
85       color: rgba(0,0,0,.85);
86       font-size: 14px;
87       font-weight: 500;
88       margin-bottom: 16px;
89     }
90
91     /deep/ .term {
92       color: rgba(0,0,0,.85);
93       display: table-cell;
94       line-height: 20px;
95       margin-right: 8px;
96       padding-bottom: 16px;
97       white-space: nowrap;
98
99       &:not(:empty):after {
100         content: ":";
101         margin: 0 8px 0 2px;
102         position: relative;
103         top: -.5px;
104       }
105     }
106
107     /deep/ .content {
108       color: rgba(0,0,0,.65);
109       display: table-cell;
110       min-height: 22px;
111       line-height: 22px;
112       padding-bottom: 16px;
113       width: 100%;
114       &:empty {
115         content: ' ';
116         height: 38px;
117         padding-bottom: 16px;
118       }
119     }
120
121     &.small {
122
123       .title {
124         font-size: 14px;
125         color: rgba(0, 0, 0, .65);
126         font-weight: normal;
127         margin-bottom: 12px;
128       }
129       /deep/ .term, .content {
130         padding-bottom: 8px;
131       }
132     }
133
134     &.large {
135       /deep/ .term, .content {
136         padding-bottom: 16px;
137       }
138
139       .title {
140         font-size: 16px;
141       }
142     }
143
144     &.vertical {
145       .term {
146         padding-bottom: 8px;
147       }
148       /deep/ .term, .content {
149         display: block;
150       }
151     }
152   }
153 </style>