vue + element ui 实现超出宽度展示…，鼠标移入显示完整内容

代码理念： 当高度大于对应行数的高度 则说明需要展示"…"

子组件

<template><div class="tooltip"><div ref="tooltipRef" :class="['tooltip-text', {'tooltip-active': isShow}]" :style="{height: textHeight && textHeight + 'px'}"><div v-if="state" class="content"><slot></slot></div><el-tooltipclass="box-item"effect="light":content="title"placement="top"v-else><div class="content"><slot></slot></div></el-tooltip></div></div>
</template><script>
export default {name: 'TextCollapse',props: {title: {type: String,default: ''},lineClamp: {type: Number,default: 1}},data() {return {isShow: false, // 展开、收起状态state: false, // 展开还是收起textHeight: null // text 高度 }},mounted() {this.$nextTick(() => {this.handleShow()})},methods: {handleShow() {const text = this.$refs.tooltipRef;const textStyle = window.getComputedStyle(text);const height = parseInt(textStyle.height);const lineHeight = parseInt(textStyle.lineHeight);// 判断是否需要展开 当高度大于行高 * 行数时，需要展开if (height > lineHeight * this.lineClamp + 1) {this.state = false;this.isShow = true;this.textHeight = lineHeight * this.lineClamp;}else {this.textHeight = height;this.state = true;}}}
}
</script><style scoped lang="scss">.tooltip {display: flex;.tooltip-text {// line-height: 28px;transition: height .3s ease;overflow: hidden;text-align: left;position: relative;width: 100%;.content {display: inline;}.btn {display: inline-block;padding-left: 6px;color: #0E6EB8;height: 28px;font-weight: 400;font-size: 14px;line-height: 28px;cursor: pointer;background: #fff;}}.tooltip-text.tooltip-active {.content {display: -webkit-box;-webkit-line-clamp: 1; //行数(this.lineClamp的值)-webkit-box-orient: vertical;overflow: hidden;}.btn {position: absolute;right: 0;top: 0;}}}
</style>

父组件

<div class="email-item flex" v-for="(item,index) in selectEmails" :key="index"><Tooltip :title="item.label" :key="item.label">({{ item.compName }})</Tooltip>
</div>