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

• Z时代
• 2024-03-02
• 分类：IT

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

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

回答：

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

回答：

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

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

以上是 请问步骤条step加气泡卡片popover怎么实现？ 的全部内容， 来源链接： utcz.com/p/935068.html