vue 文字超长显示...鼠标悬浮显示全部组件封装:
组件 tooltipOver.vue
<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: 'TooltipOver',
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 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.wid200 {
width: 100%;
}
p{
margin: 0;
}
</style>
组件使用:
// msg 为需要显示的文字
<tooltip-over
:content="msg"
class="wid200"
refName="tooltipOver"
/>
// 引入组件
import tooltipOver from './tooltipOver'
// 注册组件
components: {
tooltipOver,
},