在 Vue 2 和 Vue 3 中,Element UI(针对 Vue 2)和 Element Plus(针对 Vue 3)提供了 Steps 步骤条组件,用于展示当前操作的进度步骤。虽然这两个库都提供了步骤条组件,但它们在属性、事件和方法的实现上可能会有所不同。下面我将分别介绍 Vue 2 下的 Element UI Steps 组件和 Vue 3 下的 Element Plus Steps 组件的使用方式。
Vue 2 + Element UI Steps 组件
属性(Props)
space
:步骤之间的间距。direction
:步骤条的方向,可选值为horizontal
或vertical
。active
:当前激活的步骤,可以使用v-model
双向绑定。finish-status
:已完成步骤的状态,默认值为success
。process-status
:当前步骤的状态,默认值为process
。simple
:是否使用简洁风格。
事件(Events)
change
:当活跃步骤改变时触发,返回改变后的步骤的索引,从 0 开始。
方法(Methods)
Element UI 的 Steps 组件在 Vue 2 中通常不直接暴露方法供外部调用。你主要通过修改绑定的 active
属性来控制步骤条的状态。