vue2 实现一个超出隐藏显示省略号,鼠标滑过显示tip组件
组件 NormalTextTooltipol.vue
<template>
<div class="tooltip-wrap">
<el-tooltip
ref="tlp"
:content="text"
effect="dark"
:disabled="!tooltipFlag"
:placement="placement"
>
<p
class="over-flow"
@mouseenter.stop="visibilityChange($event)"
>
{{ text ? text : '-' }}
</p>
</el-tooltip>
</div>
</template>
<script>
export default {
name: 'NormalTextTooltipol',
props: {
text: { type: String, default: '' },
placement: { type: String, default: 'top-start' },
className: { type: String, default: 'text' }
},
data() {
return {
disabledTip: false,
tooltipFlag: false
};
},
methods: {
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 scoped>
.tooltip-wrap {
height: 18px;
z-index: 999;
}
.over-flow {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
}
p {
width: 100%;
margin: 0;
}
</style>
使用组件
<NormalTextTooltipol :text="item.value" />
效果