Advertisement

区分vue2和vue3下的element UI Steps组件的步骤条组件,并详细介绍属性、事件、方法如何使用

阅读量:

在Vue框架的不同版本中配置了Steps组件用于显示操作进度。值得注意的是,在不同版本中使用的Steps组件虽然功能相似但在实现细节上可能会存在差异。具体实现部分本节将详细阐述两个主要组件的具体用法以及它们之间的区别。

Vue 2 + Element UI Steps 组件

属性(Props)
  • 间隔:操作步骤之间的间隔距离。
  • 方向设置:定义操作方向(水平或垂直)。
  • 当前步骤:指当前执行的操作步骤编号(需与v-model双向绑定)。
  • 完成状态:表示已处理的操作步骤的状态(默认成功)。
  • 步骤状态:表示当前处理的操作步骤的状态(默认为流程中)。
  • 是否简洁模式:指示是否采用简洁的设计风格.
事件(Events)
  • change:当活跃步骤改变时触发,返回改变后的步骤的索引,从 0 开始。
方法(Methods)

Element UI 的 Steps 组件在 Vue 2 中一般情况下避免直接提供方法让外部调用。你主要通过修改绑定的 active 属性来控制步骤条的状态。

示例
复制代码
    <template>
      <el-steps :active="active" finish-status="success" process-status="process" @

全部评论 (0)

还没有任何评论哟~