Vue3结合el-tooltip组件实现文字溢出时，鼠标滑过显示全部文本

Vivqst

已于 2024-05-31 08:57:46 修改

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript

于 2023-10-31 14:39:45 首次发布

本文链接：https://blog.csdn.net/qiansitong/article/details/134139776

文章介绍了如何在Vue项目中，利用ElementPlus的el-tooltip组件，当文本内容超出容器时，通过鼠标悬停触发悬浮框展示全部文本的方法。

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

结合element-plus的el-tooltip组件，实现当文本溢出时实现悬浮框展示全部文本的效果

<template>
  <div class="show-tooltip-wrapper">
    <ul class="tooltip-list">
      <li v-for="(item, index) in todoList" :key="index">
        <el-tooltip
          placement="top-start"
          effect="dark"
          :disabled="!item.showTooltip"
          :content="item.content">
          <div @mouseenter="handleMouseEnter($event, index)" class="inner-text">{{ item.content }} </div>
        </el-tooltip>
      </li>      
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue"

interface TodoItem {
  content: string;
  showTooltip: boolean;
}

const todoList = reactive<Array<TodoItem>>([
  {
    content: "分析上周产品运营数据，制定本周工作计划，与市场营销团队讨论本月营销活动计划",
    showTooltip: false
  },
  {
    content: "调研竞品，分析优缺点，为产品优化提供建议，与设计团队讨论产品界面优化方案",
    showTooltip: false
  },
  {
    content: "与研发团队讨论本周项目进度和问题解决方案，撰写产品需求文档，确定优先级",
    showTooltip: false
  },
  {
    content: "与测试团队评估产品测试计划和测试用例，参与产品设计评审",
    showTooltip: false
  },
  {
    content: "整理本周产品优化方案，提交给上级审批，与运营团队讨论本月活动策划及推广方案，跟进本周项目进度，协调解决紧急问题",
    showTooltip: false
  }
])

const handleMouseEnter = (event: MouseEvent, index: number) => {
  const target: EventTarget | null = event.target
  console.log(target)
  if(target) {
    todoList[index].showTooltip = (target as HTMLElement).scrollWidth > (target as HTMLElement).clientWidth
  }
}
</script>

<style lang="scss" scoped>
  .show-tooltip-wrapper {
    width: 500px;
    margin: 20px;
    padding: 0 20px;
    background-color: lightslategray;
    border-radius: 4px;
    .tooltip-list {
      width: auto;
      color: #fafafa;
      font-size: 16px;
      padding-left: 0;
      list-style: none;
      li {
        padding: 14px 0;
        cursor: pointer;
        border-bottom: 1px solid rgba(#fff, .2);
        .inner-text {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
</style>