<template>
<div class="label-container">
<div style="border: 1px solid #d9d9d9"></div>
<div class="header">
<div class="biaoqian">客户特征标签</div>
<el-popover
placement="right"
popper-class="group-popover"
width="287"
trigger="click">
<div class="full-label-section">
<span>业务需求</span>
<div class="full-
tag-group">
<el-popover
v-for="(item, index) in requireList"
:key="index"
placement="top-start"
popper-class="grid-popover"
trigger="hover"
:content="item.labelName"
v-if="shouldShowPopover(item)"
>
<el-
tag
slot="reference"
size="mini"
class="truncate-
tag"
>{{ item.labelName }}</el-
tag>
</el-popover>
<el-
tag
v-for="(item, index) in requireList"
v-if="!shouldShowPopover(item)"
:key="index"
size="mini"
>{{ item.labelName }}</el-
tag>
</div>
</div>
<div class="full-label-section">
<span>业务特征</span>
<div class="full-
tag-group">
<el-popover
v-for="(item, index) in featureList"
:key="index"
placement="top-start"
popper-class="grid-popover"
trigger="hover"
:content="item.labelName"
v-if="shouldShowPopover(item)"
>
<el-
tag
slot="reference"
type=""
size="mini"
class="truncate-
tag"
>{{ item.labelName }}</el-
tag>
</el-popover>
<el-
tag
v-for="(item, index) in featureList"
v-if="!shouldShowPopover(item)"
:key="index"
type="success"
size="mini"
>{{ item.labelName }}</el-
tag>
</div>
</div>
<div class="full-label-section full-label-sections">
<span>拓展任务</span>
<div class="full-
tag-group">
<el-popover
v-for="(item, index) in taskList"
:key="index"
placement="top-start"
popper-class="grid-popover"
trigger="hover"
:content="item.labelName"
v-if="shouldShowPopover(item)"
>
<el-
tag
slot="reference"
type="danger"
size="mini"
class="truncate-
tag"
>{{ item.labelName }}</el-
tag>
</el-popover>
<el-
tag
v-for="(item, index) in taskList"
v-if="!shouldShowPopover(item)"
:key="index"
type="danger"
size="mini"
>{{ item.labelName }}</el-
tag>
</div>
</div>
<el-button slot="reference" class="btn">更多</el-button>
</el-popover>
</div>
<!-- 客户特征部分标签 -->
<div style="padding: 10px; background: #fafafa">
<div class="label-section">
<span>业务需求</span>
<div class="
tag-group">
<el-popover
v-for="(item, index) in showRequireList"
:key="index"
placement="top-start"
popper-class="grid-popover"
trigger="hover"
:content="item.labelName"
v-if="shouldShowPopover(item)"
>
<el-
tag
slot="reference"
size="mini"
class="truncate-
tag"
>{{ item.labelName }}</el-
tag>
</el-popover>
<el-
tag
v-for="(item, index) in showRequireList"
v-if="!shouldShowPopover(item)"
:key="index"
size="mini"
>{{ item.labelName }}</el-
tag>
</div>
</div>
<div class="label-section">
<span>业务特征</span>
<div class="
tag-group">
<el-popover
v-for="(item, index) in showFeatureList"
:key="index"
placement="top-start"
popper-class="grid-popover"
trigger="hover"
:content="item.labelName"
v-if="shouldShowPopover(item)"
>
<el-
tag
slot="reference"
type="success"
size="mini"
class="truncate-
tag"
>{{ item.labelName }}</el-
tag>
</el-popover>
<el-
tag
v-for="(item, index) in showFeatureList"
v-if="!shouldShowPopover(item)"
:key="index"
type="success"
size="mini"
>{{ item.labelName }}</el-
tag>
</div>
</div>
<div class="label-section">
<span>拓展任务</span>
<div class="
tag-group">
<el-popover
v-for="(item, index) in showTaskList"
:key="index"
placement="top-start"
popper-class="grid-popover"
trigger="hover"
:content="item.labelName"
v-if="shouldShowPopover(item)"
>
<el-
tag
slot="reference"
type="danger"
size="mini"
class="truncate-
tag"
>{{ item.labelName }}</el-
tag>
</el-popover>
<el-
tag
v-for="(item, index) in showTaskList"
v-if="!shouldShowPopover(item)"
:key="index"
type="danger"
size="mini"
>{{ item.labelName }}</el-
tag>
</div>
</div>
</div>
</div>
</template>
<script>
import {
Tag, Button, Popover,Tooltip } from 'element-ui';
export default {
name: 'groupLabelBox',
components: {
[
Tag.name]:
Tag,
[Button.name]: Button,
[Popover.name]: Popover,
[Tooltip.name]: Tooltip,
},
props: {
requireList: {
type: Array,
required: true,
},
featureList: {
type: Array,
required: true,
},
taskList: {
type: Array,
required: true,
},
},
data() {
return {
dialogVisible: false,
};
},
computed: {
showRequireList() {
return this.requireList.slice(0, 2);
},
showFeatureList() {
return this.featureList.slice(0, 2);
},
showTaskList() {
return this.taskList.slice(0, 2);
},
},
methods: {
shouldShowPopover(item) {
return item?.labelName?.length >= 7
},
},
};
</script>
<style lang="less" scoped>
.group-popover {
padding: 30px !important;
/* 标题样式 */
.full-label-section{
padding-bottom: 12px;
> span {
display: block;
margin-bottom: 10px;
width: 56px;
height: 14px;
font-family: PingFangSC, PingFang SC, sans-serif;
font-weight: 400;
font-size: 14px;
color: #888888;
line-height: 14px;
text-align: left;
font-style: normal;
}
}
/* 标签组样式 */
.full-
tag-group {
display:
flex;
flex-wrap: wrap;
justify-content:
flex-start;
gap: 6px;
.el-
tag {
margin: 0 !important;
border-radius: 4px;
font-size: 12px;
padding: 0 8px;
height: 24px;
line-height: 24px;
}
}
.full-label-sections {
padding-bottom: 0 !important;
}
}
.truncate-
tag {
display: inline-block;
max-width: 112px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
cursor: default;
}
.truncate-
tag:hover:after {
position: absolute;
top: 30px;
left: 10px;
content: attr(data-title);
color: #333333;
}
.grid-popover {
min-width: 54px;
text-align: center;
padding: 10px 10px;
}
.label-container {
position: relative;
padding: 0px 14px 7px 16px;
}
.header {
display:
flex;
justify-content: space-between;
align-items: center;
margin: 10px 0px;
.biaoqian {
width: 84px;
height: 14px;
font-family: PingFangSC, PingFang SC, sans-serif;
font-weight: 400;
font-size: 14px;
color: #888888;
line-height: 14px;
text-align: left;
font-style: normal;
}
.btn {
width: 33px;
height: 17px;
padding: 0 4px;
background: #ffffff;
border-radius: 2px;
border: 1px solid #cbcbcb;
font-weight: 400;
font-size: 12px;
color: #333333;
line-height: 17px;
font-style: normal;
> span {
display: block;
width: fit-content;
}
}
}
.label-section {
> span {
display: block;
margin-bottom: 5px;
width: 48px;
height: 14px;
font-family: PingFangSC, PingFang SC, sans-serif;
font-weight: 400;
font-size: 12px;
color: #333333;
line-height: 14px;
text-align: left;
font-style: normal;
}
}
.
tag-group {
display:
flex;
gap: 10px;
flex-wrap: wrap;
}
.label-section:not(:last-child) {
margin-bottom: 10px;
}
</style>
优化这段代码
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
