1.封装公共组件
<template>
<div class="text-over-tooltip">
<el-tooltip :effect="effect" :disabled="isShowTooltip" :content="content" :placement="placement">
<div class="isEllipsis" :class="className" @mouseover="onMouseOver(refName)">
<span :ref="refName">{{ content }}</span>
</div>
</el-tooltip>
</div>
</template>
<script>
export default {
name: 'TextOverTooltip',
props: {
// 显示的文字内容
content: String,
// 设置父元素的样式:比如宽度字体等,需可以自己在组件内部配置样式比如字体大小20:fs20
className: String,
// 子元素标识(如在同一页面中调用多次组件,此参数不可重复)
refName: String,
// 默认提供的主题 dark/light
effect: {
type: String,
default: () => {
return 'light';
}
},
// Tooltip 的出现位置top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
placement: {
type: String,
default: () => {
return 'top';
}
},
},
data() {
return {
isShowTooltip: true // 是否需要禁止提示
};
},
methods: {
// 移入事件: 判断内容的宽度contentWidth是否大于父级的宽度
onMouseOver(str) {
let parentWidth = this.$refs[str].parentNode.offsetWidth;
let contentWidth = this.$refs[str].offsetWidth;
// 判断是否禁用tooltip功能
this.isShowTooltip = contentWidth <= parentWidth;
}
}
};
</script>
<style lang="scss" scoped>
.text-over-tooltip {
/* 文字超出宽度显示省略号 单行*/
.isEllipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 自定义样式 */
.fs14 {
font-size: 14px;
font-weight: 600;
color: #606266;
line-height: 22px;
}
}
</style>
使用以上公共组件实例
引入公共组件,封装的公共组件一般放在components文件夹下面
import TextOverTooltip from ‘@/components/TextOverTooltip.vue’;
components: { TextOverTooltip },
使用公共组件
<div>
<text-over-tooltip refName="testName" className="fs14" content="28、如果能够控制自己的悲欢离合,那未必是件好事;因为只有在雨后才会见到彩虹,如果冬天来了,春天还会远吗?如果黑暗来临,光明还会远吗?">
</text-over-tooltip>
</div>