当前位置：首页 > news >正文

Element-Plus：popconfirm与tooltip一起使用不生效？

news 来源：原创 2025/6/10 7:37:28

你们好，我是金金金。

在这里插入图片描述

场景

我正在使用Element-plus组件库当中的el-popconfirm和el-tooltip，产品要求是两个需要结合一起使用，也就是鼠标悬浮上去有提示文字，并且点击之后需要出现气泡确认框

在这里插入图片描述

代码

<el-popconfirm title="是否清空已有的chunk?" @confirm="handleContinueParseClick(scope.row, 'ok')"@cancel="handleContinueParseClick(scope.row, 'cancel')"><template #reference><el-tooltip effect="dark" content="开始解析" placement="top-start"><el-icon size="20" color="#409eff" style="cursor: pointer"><VideoPlay /></el-icon></el-tooltip></template>
</el-popconfirm>

换了好几种写法，那么就是提示文字出现了，气泡确认框点击没反应

要么就是气泡确认框出现了然后鼠标悬浮上去没提示文字

解决

el-popconfirm与el-tooltip一起使用时失效解决办法： 添加关键的reference,并且用div再包裹一层

<el-popconfirm title="是否清空已有的chunk?" @confirm="handleContinueParseClick(scope.row, 'ok')"@cancel="handleContinueParseClick(scope.row, 'cancel')"><template #reference><div style="display: flex; align-items: center;"><el-tooltip effect="dark" content="开始解析" placement="top-start"><el-icon size="20" color="#409eff" style="cursor: pointer"><VideoPlay /></el-icon></el-tooltip></div></template>
</el-popconfirm>