结合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>