平常项目中经常出现文本内容过长需要处理成省略的形式,有一些需求要求hover时将隐藏后的文本全部显示出来,如果内容不长整好显示完整则不需要hover显示,这时需要组件进行特殊处理。
代码如下:
<template>
<div class="tooltip-wrap">
<el-tooltip
ref="tlp"
:content="text"
effect="dark"
:disabled="!tooltipFlag"
:placement="placement"
class="tooltip">
<span :class="className" @mouseenter="visibilityChange($event)">{{text}}</span>
</el-tooltip>
</div>
</template>
<script>
export default {
name: 'ellipsisTooltip',
props: {
text: { // 文本内容
type: String,
default: () => ''
},
className: {
type: String,
default: () => 'text'
},
placement: {
type: String,
default: () => 'top-start'
}
},
data() {
return {
disabledTip: false,
tooltipFlag: false
}
},
mounted() {
},
methods: {
visibilityChange(e) {
const ev = e.target
const evWidth = ev.offsetWidth
const contentWidth = this.$refs.tlp.$el.parentNode.clientWidth
this.tooltipFlag = contentWidth < evWidth
}
}
}
</script>
<style lang="scss" scoped>
.tooltip-wrap{
overflow: hidden;
text-overflow: ellipsis;
span{
white-space: nowrap;
}
}
</style>
通过import引用并且创建该组件
import ellipsisTooltip from '@/components/ellipsisTooltip'
components: {
ellipsisTooltip
}
引用创建后的组件传入需要处理的文本内容即可,代码如下:
<span>
<ellipsisTooltip text="内容" />
</span>