<template> <div class="text-tooltip"> <el-tooltip :content="content" :disabled="isShowTooltip" class="item" effect="dark" placement="bottom"> <div class="tooltip_over"> <slot class="label" name="label"></slot> <div :class="className" :style="{color:normal?'#999':'','font-weight':normal?'normal':''}" class="over-flow" @mouseover="onMouseOver(refName)"> <span :ref="refName">{{ content }}</span> </div> </div> </el-tooltip> </div></template><script>export default { name: 'textTooltip', props: { //文字样式是否使用默认 normal: { type: Boolean, default: true }, // 显示的文字内容 content: { type: String, default: "" }, // 外层框的样式，在传入的这个类名中设置文字显示的宽度 className: { type: String, default: "" }, // 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复） // 当同一页面使用多次组件时，需要定义不同的refName属性 refName: { type: String, default: "" }, //若出现外层框数值不确定的情况,可使用传参的方式定义父级的宽度 parentWidth: { type: Number, default: 0 } }, data() { return { isShowTooltip: true } }, methods: { onMouseOver(str) { let contentWidth = this.$refs[str].offsetWidth; if (this.parentWidth != 0) { if (this.parentWidth < contentWidth + 20) { this.isShowTooltip = false; } else { this.isShowTooltip = true; } } else { let parentWidth = this.$refs[str].parentNode.offsetWidth; console.log(contentWidth,parentWidth,'contentWidth') // 判断是否开启tooltip功能 if (parentWidth != contentWidth) { this.isShowTooltip = false; } else { this.isShowTooltip = true; } } } }}</script><style lang="scss" scoped>@import '@/styles/mixin.scss';.tooltip_over { display: flex; .label { width: 70px; } .over-flow { flex: 1; @include ellipsis_more(1); word-break: break-all; }}</style>

使用:

<Tooltip :content="mainData.courseContent || '暂无'" refName="tooltipOverCourseContent" > <label slot="label">课程简介：</label> </Tooltip>