自定義 elementUI 描述列表組件
前言
以前用 ant design vue，組件特別多。里面有一個描述組件很好用(
后來切換到 element 發(fā)現(xiàn)沒有這種組件，每次都需要自己編寫。但是一個項目界面風(fēng)格要統(tǒng)一，每次都復(fù)制代碼很是麻煩，而且如果要改樣式，那么就是一個炸彈呀，還不得累死。一咬牙，一跺腳，自己寫一個吧。
組件設(shè)計思路
使用父子組件嵌套實現(xiàn)，父組件為 el-description , 子組件為 el-description-item 。
el-description-item 要保證默認(rèn)顯示 label 和 value ，而且還可以使用 slot 來定制內(nèi)容
利用 vue 的 $slot.content是否存在來實現(xiàn)子組件的內(nèi)容定制，不存在則顯示默認(rèn) value，存在則表示是定制內(nèi)容
利用 el-row 和 el-col 來實現(xiàn)柵格布局
組件開發(fā)
父組件 el-description
<template>
<div class="descriptions">
<div v-if="Boolean(title)" class="descriptions-title">{{ title }}</div>
<div class="descriptions-view">
<el-row class="descriptions-row">
<slot v-if="$slots.default" />
<div v-else style="text-align: center; color: grey;">暫無數(shù)據(jù)</div>
</el-row>
</div>
</div>
</template>
<script>
export default {
name: 'ElDescription',
props: {
title: {
type: String,
required: false,
default: ''
}
}
}
</script>
<style scoped lang="scss">
.descriptions{
.descriptions-title{
margin-bottom: 20px;
color: rgba(0,0,0,.85);
font-weight: 700;
font-size: 16px;
line-height: 1.5;
}
.descriptions-view{
width: 100%;
overflow: hidden;
table{
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.descriptions-row{
}
}
}
</style>
子組件 el-description-item
<template>
<el-col
:span="span"
:xs="spanMap.xs"
:sm="spanMap.sm"
:md="spanMap.md"
:lg="spanMap.lg"
:xl="spanMap.xl"
class="descriptions-item"
>
<div class="descriptions-item-content">
<div class="descriptions-item-label">{{ label }}：</div>
<div class="descriptions-item-value">
<slot v-if="$slots.content" name="content" />
<div v-else class="default-value" :title="value">{{ value }}</div>
</div>
</div>
</el-col>
</template>
<script>
export default {
name: 'ElDescriptionItem',
props: {
spanMap: {
type: Object,
required: false,
default: () => { return { } }
},
span: {
type: Number,
required: false,
default: 6
},
label: {
required: true
},
value: {
required: false,
default() {
return ''
}
}
}
}
</script>
<style scoped lang="scss">
.descriptions-item {
padding-bottom: 16px;
padding-right: 20px;
span {
display: inline-block;
}
.descriptions-item-content {
display: flex;
justify-content: flex-start;
align-items: center;
color: rgba(0,0,0,.65);
font-size: 14px;
line-height: 1.5;
width: 100%;
.descriptions-item-label{
flex-grow: 0;
flex-shrink: 0;
color: rgba(0,0,0,.85);
font-weight: 400;
font-size: 14px;
line-height: 1.5;
}
.descriptions-item-value{
flex-grow: 1;
overflow: hidden;
.default-value{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
</style>
組件使用
組件引用
// 引入組件
import ElDescription from '@/components/ElDescription'
import ElDescriptionItem from '@/components/ElDescriptionItem'
export default {
// 聲明組件
components: { ElDescription, ElDescriptionItem }
}組件使用
<!-- 可以使用span 和 span-map對象來控制柵格的大小 -->
<el-description title="測試數(shù)據(jù)">
<el-description-item label="標(biāo)題1" value="我是內(nèi)容1" :span-map="{xl:8}" />
<el-description-item label="標(biāo)題2" value="我是內(nèi)容2" :span="6" />
<el-description-item label="標(biāo)題3" value="超長文本省略號顯示，超長文本省略號顯示，超長文本省略號顯示，超長文本省略號顯示，超長文本省略號顯示，" />
<el-description-item label="標(biāo)題4" value="我是內(nèi)容4" :span="8" :span-map="{md:12}" />
<el-description-item label="標(biāo)題5" value="我是內(nèi)容5" />
<el-description-item label="標(biāo)題6" value="我是內(nèi)容6" />
<el-description-item label="標(biāo)題7" value="我是內(nèi)容7" />
<el-description-item label="標(biāo)題8" value="我是內(nèi)容8" />
<el-description-item label="定制">
<!-- 使用名稱為conent的slot來定制-->
<template slot="content">
<div style="color: red;">
我是定制內(nèi)容
</div>
</template>
</el-description-item>
</el-description>
顯示效果
評論
圖片
表情