js单行文本溢出显示省略号时才展示el-tooltip

本文主要是介绍js单行文本溢出显示省略号时才展示el-tooltip，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 主要使用：
windicss的w-100限制宽度，并使用truncate溢出显示省略号
el-tooltip的:disabled属性控制el-tooltip气泡的显示隐藏

            <el-checkbox  v-model="item.checked"><div class="w-100 flex items-center"><el-tooltip effect="dark" :content="item.label" placement="top" enterable :disabled="isDisableTooltip"><div class="truncate" @mouseover="toolTipVisibleChange($event)">{{ item.label }}</div></el-tooltip></div></el-checkbox>

 使用mouseover绑定事件toolTipVisibleChange

// 文本溢出展示el-tooltip
const isDisableTooltip = ref(true)
const toolTipVisibleChange = event => {const ev = event.targetconst evWeight = ev.scrollWidthconst contentWeight = ev.clientWidthif (evWeight > contentWeight) {// 实际宽度 > 可视宽度  文字溢出isDisableTooltip.value = false} else {// 否则为不溢出isDisableTooltip.value = true}
}

这篇关于js单行文本溢出显示省略号时才展示el-tooltip的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---