组件
poptip用的是boya组件,样式根据需要自己调整下
<template>
<div class="text-poptip-component" @mouseenter="onTextMouseEnter" @mouseleave="onTextMouseLeave">
<div v-show="isShow" ref="textnopop" class="text-no-poptip">{{ text }}</div>
<Poptip
v-show="!isShow"
word-wrap
:width="poptipWidth"
trigger="hover"
:placement="placement"
:content="text"
>
<div class="text-poptip">{{ text }}</div>
</Poptip>
</div>
</template>
<script>
export default {
props: {
text: {
type: String,
default: '--'
},
placement: {
type: String,
default: 'top-start'
}
},
data() {
return {
isShow: true,
poptipWidth: 300
}
},
methods: {
onTextMouseEnter() {
const obj = this.$refs.textnopop
this.isShow = obj.offsetWidth >= obj.scrollWidth
this.poptipWidth = obj.offsetWidth
},
onTextMouseLeave() {
this.isShow = true
}
}
}
</script>
<style lang="less" scoped>
.by-poptip {
width: 100%;
}
/deep/ .by-poptip-rel {
width: 100%;
}
.text-poptip-component {
display: inline-block;
vertical-align: top;
zoom: 1
}
.text-poptip {
width: 100%;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 20px;
}
.text-no-poptip {
width: 100%;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 20px;
}
</style>
引用后调用
注意在调用时指定宽度
<TextPoptip text="很多很多的很长很长的文字-很多很多的很长很长的文字-很多很多的很长很长的文字-很多很多的很长很长的文字" placement="bottom-start" style="width: calc(100% - 120px)" />