组件
<!--
* @Descripttion: el-tooltip重新封装
* @version: 1.0
* @Author: keyu
* @Date: 2020-07-05 10:28:45
* @LastEditTime: 2020-07-05 11:46:56
-->
<template>
<div class="tooltip-wrap">
<el-tooltip
ref="tlp"
:content="text"
effect="dark"
:disabled="!tooltipFlag"
:placement="placement"
>
<p class="over-flow" @mouseenter="visibilityChange($event)">{{ text }}</p>
</el-tooltip>
</div>
</template>
<script>
export default {
name: "tooltipWrap",
props: {
text: { type: String, default: "" }, // 字符内容
placement: { type: String, default: "top-start" },
className: { type: String, default: "text" } // class
},
data() {
return {
disabledTip: false,
tooltipFlag: false
};
},
methods: {
// tooltip的可控
visibilityChange(event) {
const ev = event.target;
const ev_weight = ev.scrollWidth; // 文本的实际宽度
const content_weight = this.$refs.tlp.$el.parentNode.clientWidth; // 文本容器宽度(父节点)
if (ev_weight > content_weight) {
// 文本宽度 > 实际内容宽度 =》内容溢出
this.tooltipFlag = true;
} else {
// 否则为不溢出
this.tooltipFlag = false;
}
}
}
};
</script>
<style lang="scss">
.tooltip-wrap {
height: 18px; // 必须要有高度设置,因为tooltip的显示条件是通过高度来判断的
}
.over-flow {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all; //英文数字折行
}
p {
width: 100%;
margin: 0;
}
</style>
页面使用
<el-col :span="6">
<el-row :gutter="10">
<el-col :span="10" id="el_col_front">车型</el-col>
<el-col :span="14" id="el_col_behind_newLong"> // 父节点
<tooltipWrap :text="inputCome.modelName.value" />
</el-col>
</el-row>
</el-col>
#el_col_behind_newLong {
min-height: 32px;
background: #f3f1f1;
text-align: left;
border-radius: 3px;
}
效果图