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

₍•ʚ•₎呀呀

已于 2023-11-07 11:24:10 修改

阅读量404

点赞数 2

文章标签： vue.js javascript 前端

于 2023-11-07 10:47:39 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_60886885/article/details/134262054

版权

文章介绍了如何使用Windicss的w-100限制元素宽度，并结合el-tooltip实现文本溢出时的省略号效果，通过mouseover事件和disabled属性控制tooltip的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要使用：
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.target
  const evWeight = ev.scrollWidth

  const contentWeight = ev.clientWidth

  if (evWeight > contentWeight) {
    // 实际宽度 > 可视宽度  文字溢出
    isDisableTooltip.value = false
  } else {
    // 否则为不溢出
    isDisableTooltip.value = true
  }
}