el-tooltip封装

el-tooltip动态根据是否有省略号显示tip效果

封装组件

<template><el-tooltip:content="String(props.content)":disabled="tooltipIsShow":placement="props.placement":popper-class="props.popperClass ?props.popperClass : 'table-body-tooltip'"><div class="text-ellipsis"@mouseenter="tooltipIsDisHandler($event)">{{props.content}}</div></el-tooltip></template><script setup>import{ref}from"vue"const props=defineProps({content:{type:[String,Number],default:()=>{returnundefined}},// 文本popperClass:{type:[String],default:()=>{returnundefined}},// 自定义类名placement:{type:[String],default:()=>{return'top'}},// 自定义类名})let tooltipIsShow=ref(false)const tooltipIsDisHandler=ev=>{if(ev.target.clientWidth<ev.target.scrollWidth){tooltipIsShow.value=false}else{tooltipIsShow.value=true}}</script><style lang="scss"scoped>.text-ellipsis{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}</style><style lang="scss">// 自定义的类名.tooltip_my_class{width:360px;background-color:#5e99d6!important;// 展开下拉背景border:1px solid #5e99d6!important;// 展开下拉边框}.tooltip_my_class.el-popper__arrow::before{border-top:1px solid #5e99d6!important;// 箭头按钮边框background-color:#5e99d6!important;// 箭头按钮背景色border-color:#5e99d6!important;// 箭头按钮背景色}</style>

使用

<my-tooltips:popperClass="'tooltip_my_class'":placement="'top-start'":content="item.name ?? ''"/>