a-steps

原创已于 2023-06-09 13:50:44 修改 · 345 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #开发语言

于 2023-06-09 13:48:45 首次发布

vantd随笔专栏收录该内容

10 篇文章

订阅专栏

该代码段展示了如何在前端应用中使用a-steps组件显示流程步骤，并结合a-popover组件为每个步骤提供状态的圆点冒泡提示。通过v-for遍历flowInstances，动态生成步骤条，包含stepName和signIdea信息。

<a-steps  v-show="item.flowInstances.length > 0" :current="1">
              <a-popover slot="progressDot" 
                        slot-scope="{ index, status, prefixCls }">
                 <template slot="content">
                 <span>step {{ index }} status: {{ status }}</span>
                 </template>
                  <span :class="`${prefixCls}-icon-dot`" />
               </a-popover>
               <a-step v-for="flow in item.flowInstances" 
                 :key="flow.id" :title="flow.stepName"
                 :description="flow.signIdea" />
             </a-steps>

a-popover 是圆点冒泡提示