Element 2 组件源码剖析之 Steps 步骤条(下)-核心逻辑

2023-09-25 10:25:43

引言

在 Element 2 UI 组件库中，Steps 步骤条组件是一项不可或缺的利器，它可以让用户按照既定的流程逐步完成任务。当任务较复杂或存在先后关系时，将任务分解成一系列步骤，可以极大简化任务的执行。在本文中，我们将深入剖析 Steps 组件的源码，揭开其核心逻辑的神秘面纱，助你掌握构建步骤导航条的精髓。

核心逻辑剖析

1. 数据模型

Steps 组件的核心数据模型是一个步骤列表，每个步骤由以下属性组成：

title：步骤标题
description：步骤
status：步骤状态（进行中、完成、未开始）

2. 状态管理

组件维护了一个当前步骤的内部状态，并根据用户交互动态更新。通过 current 属性可以获取当前步骤的索引。

3. 渲染流程

Steps 组件采用虚拟 DOM 来渲染步骤条。它根据当前步骤状态渲染不同的样式，并通过 v-for 指令遍历步骤列表，生成对应的步骤项。

4. 交互处理

组件监听用户点击事件，并根据点击的步骤索引更新 current 状态。同时，它还会触发 change 事件，以便外部代码响应步骤变化。

代码示例

以下代码展示了 Steps 组件的基本用法：

<template>
  <el-steps :active="current" @change="handleChange">
    <el-step title="步骤 1" description="步骤 1 "></el-step>
    <el-step title="步骤 2" description="步骤 2 描述"></el-step>
    <el-step title="步骤 3" description="步骤 3 描述"></el-step>
  </el-steps>
</template>

<script>
  export default {
    data() {
      return {
        current: 0
      }
    },
    methods: {
      handleChange(val) {
        this.current = val
      }
    }
  }
</script>