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

Question

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

<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>

Answer 1

看文档 提供了插槽
这边应该修改你的代码为

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

Answer 2

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

<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>

Answer 3

您的问题是关于如何在 Vue.js 的 Element UI 框架中使用步骤条（el-steps）和气泡卡片（el-popover）组件来实现一个特定的功能，但您提供的代码示例并没有达到预期的效果。

首先，要注意的是，el-popover 组件是用于显示一个弹出式的卡片，而 el-step 是用于表示步骤条的一个步骤。通常，我们不会在一个 el-step 中嵌套一个 el-popover，因为这样不符合实际的使用场景。

如果你希望在步骤条的每个步骤上显示一个气泡卡片，我建议你可以考虑使用 el-tooltip 组件。这个组件可以在用户把鼠标悬停在特定元素上时，显示一个提示信息。这样，你可以将每个步骤的标题作为提示信息，然后将鼠标悬停在步骤上时显示一个包含更多详细信息的气泡卡片。

下面是一个示例代码：

<el-steps :space="200" :active="1" finish-status="success" >  <el-step  v-for="(item,index) in stepList" :key="index" :title="item.title" :tooltip="item.title" >    <!-- 内容 -->  </el-step></el-steps>

export default {  data() {    return {      stepList: [        { title: 'Step 1' },        { title: 'Step 2' },        // ... 更多步骤      ]    }  }}

如果你需要更详细的信息或者有其他的实现需求，请提供更多的细节，我会很乐意帮助你。