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>