组件代码
template>
<div>
<el-tooltip
class="item"
effect="dark"
ref="ellipse_tooltip"
:content="tooltipContent"
:placement="placement"
>
</el-tooltip>
</div>
</template>
<script>
export default {
name: "xc-el-tooltip",
props: {
placement: {
type: String,
default: "top",
},
},
data() {
return {
tooltipContent: "",
};
},
methods: {
handleDivMouseEnter(event) {
const cell = event.target;
if (cell.scrollWidth > cell.clientWidth) {
const tooltip = this.$refs.ellipse_tooltip;
this.tooltipContent = cell.innerText || cell.textContent;
tooltip.referenceElm = cell;
tooltip.doDestroy();
tooltip.setExpectedState(true);
tooltip.handleShowPopper();
}
},
handleDivMouseleave() {
const tooltip = this.$refs.ellipse_tooltip;
if (tooltip) {
tooltip.setExpectedState(false);
tooltip.handleClosePopper();
}
},
},
};
</script>
<style>
</style>
使用
<xc-el-tooltip ref="xcElTooltip"> </xc-el-tooltip>
<div class="menu_title gray pl10 flex1" @mouseenter="handleDivMouseEnter($event)"
@mouseleave="handleDivMouseleave()"
>
{{ item.factoryName }}
</div>
handleDivMouseEnter(event){
console.log("this.==",this);
this.$refs.xcElTooltip.handleDivMouseEnter(event);
},
handleDivMouseleave(){
this.$refs.xcElTooltip.handleDivMouseleave();
},
``
`