原文地址：http://isee.xyz/a/60370591cfe9924ea139030d
前言
以前用 ant design vue，組件特別多。 里面有一個(gè)描述組件很好用(描述組件)壹粟，后來切換到 element 發(fā)現(xiàn)沒有這種組件，每次都需要自己編寫。但是一個(gè)項(xiàng)目界面風(fēng)格要統(tǒng)一洞斯，每次都復(fù)制代碼很是麻煩尝丐，而且如果要改樣式，那么就是一個(gè)炸彈呀搪哪，還不得累死靡努。一咬牙，一跺腳晓折，自己寫一個(gè)吧惑朦。
組件設(shè)計(jì)思路
- 使用父子組件嵌套實(shí)現(xiàn)，父組件為
el-description, 子組件為el-description-item漓概。 -
el-description-item要保證默認(rèn)顯示label和value漾月，而且還可以使用slot來定制內(nèi)容 - 利用
vue的$slot.content是否存在來實(shí)現(xiàn)子組件的內(nèi)容定制，不存在則顯示默認(rèn)value胃珍，存在則表示是定制內(nèi)容 - 利用
el-row和el-col來實(shí)現(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="超長文本省略號(hào)顯示梁肿，超長文本省略號(hào)顯示蜓陌，超長文本省略號(hào)顯示，超長文本省略號(hào)顯示吩蔑，超長文本省略號(hào)顯示钮热，" /> <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> -
顯示效果
description.jpg
