element组件特别多。里面有一个描述组件很好用,但最近需要封装一个组件，使用的是iview，所以就想着自己封装一个el-description。
实现思路：
-
使用父子组件嵌套实现，父组件为 el-description , 子组件为 el-description-item 。
-
el-description-item 要保证默认显示 label 和 value ，而且还可以使用 slot 来定制内容
-
利用 vue 的 $slot.content是否存在来实现子组件的内容定制，不存在则显示默认 value，存在则表示是定制内容
-
利用 el-row 和 el-col 来实现栅格布局
父组件：
1 <template>
2 <div class="descriptions">
3 <div v-if="Boolean(title)" class="descriptions-title">{{ title }}</div>
4 <div class="descriptions-view">
5 <el-row class="descriptions-row">
6 <slot v-if="$slots.default" />
7 <div v-else style="text-align: center; color: grey;">暂无数据</div>
8 </el-row>
9 </div>
10 </div>
11 </template>
12
13 <script>
14 export default {
15 name: 'ElDescription',
16 props: {
17 title: {
18 type: String,
19 required: false,
20 default: ''
21 }
22 }
23 }
24 </script>
25
26 <style scoped lang="scss">
27 .descriptions{
28 .descriptions-title{
29 margin-bottom: 20px;
30 color: rgba(0,0,0,.85);
31 font-weight: 700;
32 font-size: 16px;
33 line-height: 1.5;
34 }
35 .descriptions-view{
36 width: 100%;
37 overflow: hidden;
38 table{
39 width: 100%;
40 table-layout: fixed;
41 border-collapse: collapse;
42 }
43 .descriptions-row{
44
45 }
46 }
47
48 }
49
50 </style>
子组件el-description-item
1 <template>
2 <el-col
3 :span="span"
4 :xs="spanMap.xs"
5 :sm="spanMap.sm"
6 :md="spanMap.md"
7 :lg="spanMap.lg"
8 :xl="spanMap.xl"
9 class="descriptions-item"
10 >
11 <div class="descriptions-item-content">
12 <div class="descriptions-item-label">{{ label }}：</div>
13 <div class="descriptions-item-value">
14 <slot v-if="$slots.content" name="content" />
15 <div v-else class="default-value" :title="value">{{ value }}</div>
16 </div>
17 </div>
18 </el-col>
19 </template>
20
21 <script>
22 export default {
23 name: 'ElDescriptionItem',
24 props: {
25 spanMap: {
26 type: Object,
27 required: false,
28 default: () => { return { } }
29 },
30 span: {
31 type: Number,
32 required: false,
33 default: 6
34 },
35 label: {
36 required: true
37 },
38 value: {
39 required: false,
40 default() {
41 return ''
42 }
43 }
44 }
45
46 }
47 </script>
48
49 <style scoped lang="scss">
50 .descriptions-item {
51 padding-bottom: 16px;
52 padding-right: 20px;
53 span {
54 display: inline-block;
55 }
56 .descriptions-item-content {
57 display: flex;
58 justify-content: flex-start;
59 align-items: center;
60 color: rgba(0,0,0,.65);
61 font-size: 14px;
62 line-height: 1.5;
63 width: 100%;
64 .descriptions-item-label{
65 flex-grow: 0;
66 flex-shrink: 0;
67 color: rgba(0,0,0,.85);
68 font-weight: 400;
69 font-size: 14px;
70 line-height: 1.5;
71 }
72 .descriptions-item-value{
73 flex-grow: 1;
74 overflow: hidden;
75 .default-value{
76 overflow: hidden;
77 text-overflow: ellipsis;
78 white-space: Nowrap;
79 }
80 }
81 }
82 }
83 </style>
组件使用：
1 <template> 2 <div id="descritions"> 3 <!-- 可以使用span 和 span-map对象来控制栅格的大小 --> 4 <el-description title="测试数据"> 5 <el-description-item label="标题1" value="我是内容1" :span-map="{xl:8}" /> 6 <el-description-item label="标题2" value="我是内容2" :span="6" /> 7 <el-description-item label="标题3" value="超长文本省略号显示，超长文本省略号显示，超长文本省略号显示，超长文本省略号显示，超长文本省略号显示，" /> 8 <el-description-item label="标题4" value="我是内容4" :span="8" :span-map="{md:12}" /> 9 <el-description-item label="标题5" value="我是内容5" /> 10 <el-description-item label="标题6" value="我是内容6" /> 11 <el-description-item label="标题7" value="我是内容7" /> 12 <el-description-item label="标题8" value="我是内容8" /> 13 <el-description-item label="定制"> 14 <!-- 使用名称为conent的slot来定制--> 15 <template slot="content"> 16 <div style="color: red;"> 17 我是定制内容 18 </div> 19 </template> 20 </el-description-item> 21 </el-description> 22 </div> 23 </template> 24 <script> 25 // 引入组件 26 import ElDescription from './el-description.vue' 27 import ElDescriptionItem from './el-description-item.vue' 28 export default { 29 name: "", 30 components: { ElDescription, ElDescriptionItem }, 31 data() { 32 return { 33 34 }; 35 } 36 } 37 </script> 38 <style lang="scss" scoped> 39 #descritions{ 40 background-color: #fff; 41 } 42 </style>
效果如图：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
