请问步骤条step加气泡卡片popover怎么实现？

作者站长头像
站长
· 阅读数 20

如下代码已实践不能实现目的，请问该怎么实现？

<el-steps :space="200" :active="1" finish-status="success" >
  <el-step  v-for="(item,index) in stepList" :key="index" :title="item.title" >
      <el-popover
       placement="top-start"
       title="标题"
       width="200"
       trigger="hover">
        <template>
           <el-button slot="reference">{{item.title}}</el-button>
        </template>
      </el-popover>
  </el-step>
</el-steps>
回复
1个回答
avatar
test
2024-06-25

使用 title 属性的 slot 插槽插入一个 <el-popover> 组件就行了。

answer image


<el-steps :active="active" finish-status="success">
  <el-step>
    <el-popover
       slot="title"
       placement="top-start"
       title="这里是气泡框内容"
       width="200"
       trigger="hover">
        <template>
           <span slot="reference">步骤条标题</span>
        </template>
      </el-popover>
  </el-step>
</el-steps>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容