Element-Plus:popconfirm与tooltip一起使用不生效?

你们好,我是金金金。

场景

我正在使用Element-plus组件库当中的el-popconfirmel-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>

测试

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

  • 编写有误还请大佬指正,万分感谢。
相关推荐
小小小小宇8 分钟前
前端小tips
前端
HelloWord~14 分钟前
SpringSecurity+vue通用权限系统
vue.js·spring boot
小小小小宇17 分钟前
二维数组按顺时针螺旋顺序
前端
安木夕36 分钟前
C#-Visual Studio宇宙第一IDE使用实践
前端·c#·.net
努力敲代码呀~38 分钟前
前端高频面试题2:浏览器/计算机网络
前端·计算机网络·html
高山我梦口香糖1 小时前
[electron]预脚本不显示内联script
前端·javascript·electron
神探小白牙1 小时前
vue-video-player视频保活成功确无法推送问题
前端·vue.js·音视频
Angel_girl3192 小时前
vue项目使用svg图标
前端·vue.js
難釋懷2 小时前
vue 项目中常用的 2 个 Ajax 库
前端·vue.js·ajax
Qian Xiaoo2 小时前
Ajax入门
前端·ajax·okhttp