你们好,我是金金金。

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

代码
js
<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再包裹一层
js
<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>
测试

已测试,完美符合产品需求~
- 编写有误还请大佬指正,万分感谢。