广州大型网站建设网络黄页推广软件

你们好，我是金金金。

场景

我正在使用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>

测试

已测试，完美符合产品需求~

• 编写有误还请大佬指正，万分感谢。