使用elementui框架的时候,绝大多数情况下会使用到el-tooltip这个组件,因为总会有一些文字会超出我们给他准备的位置,但是有的时候el-tooltip使用起来确实有些麻烦,比如我们使用v-for循环产生数据的时候,数据的长度往往是不可控的长度,我们不能根据字数的多少来控制是否需要显示tooltip(ps我以前就是根据字数去判断的,但是后来因为自适应问题,不见得所有情况下都是那么多字就需要省略后面的字),后来我找到一个大神写的组件,超好用,今天记在这里,以免后来找不到了
声明:代码组件不是我写的,我是搬过来在这里记录,但是事情太久远,我不记得谁写的了,也找不到源地址了,如果有一天作者发现了,麻烦联系我,我加上你的地址,先给你说声对不起
<template>
<div class="text-tooltip">
<el-tooltip class="item" effect="dark" :disabled="isShowTooltip" :content="content" placement="top">
<p class="over-flow" :class="className" @mouseover="onMouseOver(refName)">
<span :ref="refName">{{content||'-'}}</span>
</p>
</el-tooltip>
</div>
</template>
<script>
export default {
name: 'textTooltip',
props: {
// 显示的文字内容
content: {
type: String,
default: () => {
return ''
}
},
// 外层框的样式,在传入的这个类名中设置文字显示的宽度
className: {
type: String,
default: () => {
return ''
}
},
// 为页面文字标识(如在同一页面中调用多次组件,此参数不可重复)
refName: {
type: String,
default: () => {
return ''
}
}
},
data() {
return {
isShowTooltip: true
}
},
methods: {
onMouseOver(str) {
let parentWidth = this.$refs[str].parentNode.offsetWidth;
let contentWidth = this.$refs[str].offsetWidth;
// 判断是否开启tooltip功能
if (contentWidth>parentWidth) {
this.isShowTooltip = false;
} else {
this.isShowTooltip = true;
}
}
}
}
</script>
<style lang="scss" scoped>
.over-flow {
position: relative;
top:10px;
margin: 0!important;
line-height: 1;
overflow: hidden;//
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
如果你不需要tooptip文字标记,只是想把多余的隐藏起来,那么下面这三行css样式你就够用了,只不过要注意给他一个固定宽度
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;