// customTooltip 组件 <template> <div @mouseenter="handleMouseenter" style="width: 100%"> <el-tooltip placement="top" :disabled="disabled" :content="props.content" @mouseleave="mouseleave" popper-class="tooltip"> <slot></slot> </el-tooltip> </div> </template> <script setup lang="ts"> import { ref } from 'vue' const props = defineProps({ content: { type: String, default: '', }, }) const disabled = ref(true) const handleMouseenter = (e: any) => { if (!props.content) { return } const cellChild = e.target.children[0] // range 表示文档的一个区域 const range = document.createRange() range.setStart(cellChild, 0) range.setEnd(cellChild, cellChild.childNodes.length) const flag = getStyle(cellChild, '-webkit-line-clamp') console.log(flag) if (flag == 'none') { // rangeWidth 表示元素内容的宽度 const rangeWidth = range.getBoundingClientRect().width let padding = (parseInt(getStyle(cellChild, 'paddingLeft')) || 0) + (parseInt(getStyle(cellChild, 'paddingRight')) || 0) // cellChild.offsetWidth 表示选定区域的宽度 if (rangeWidth > cellChild.offsetWidth - padding) { // 显示tooltip disabled.value = false } else { disabled.value = true } } else { // rangeHeight 表示元素内容的高度 const rangeHeight = range.getBoundingClientRect().height let padding = (parseInt(getStyle(cellChild, 'paddingTop')) || 0) + (parseInt(getStyle(cellChild, 'paddingBottom')) || 0) // cellChild.offsetHeight 表示选定区域的高度 if (rangeHeight > cellChild.offsetHeight - padding) { // 显示tooltip disabled.value = false } else { disabled.value = true } } } const mouseleave = () => { disabled.value = true } // 获取dom的样式 const getStyle = (dom: any, attr: any) => { return getComputedStyle(dom, null)[attr] } </script> <style lang="scss"> .tooltip { position: relative; z-index: 9999999 !important; } </style>
