Vue.js 组件开发：步骤条实战指南

2023-06-23 22:14:23

Vue.js 中的步骤条：从零开始打造可视化进度

作为前端开发者，我们经常需要在项目中展示任务或流程的进度，而进度条是一个极好的可视化工具。本文将指导你使用 Vue.js 从头开始开发一个步骤条组件，让你轻松掌控进度展示和控制。

创建 Vue.js 项目

首先，我们需要一个 Vue.js 项目。你可以使用 Vue CLI 工具快速创建项目，或手动创建项目结构并安装 Vue.js 库。

定义步骤条组件

接下来，在项目的 src 目录中创建 StepProgress.vue 文件，定义我们的步骤条组件：

<template>
  <div class="step-progress">
    <ul class="steps">
      <li v-for="step in steps" :class="{ 'active': step.active }">{{ step.title }}</li>
    </ul>
    <div class="progress-bar">
      <div class="progress" :style="{ width: progress + '%' }"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    steps: {
      type: Array,
      required: true
    },
    progress: {
      type: Number,
      required: true
    }
  }
}
</script>

<style>
/* 省略 CSS 样式... */
</style>

在这个组件中，我们通过 props 属性接收 steps（步骤标题和状态）和 progress（当前进度）。

使用步骤条组件

定义好步骤条组件后，就可以在项目中使用了。在 App.vue 文件中，添加以下代码：

<template>
  <div id="app">
    <StepProgress :steps="steps" :progress="progress" />
  </div>
</template>

<script>
import StepProgress from './components/StepProgress.vue'

export default {
  components: {
    StepProgress
  },
  data() {
    return {
      steps: [
        { title: 'Step 1', active: true },
        { title: 'Step 2', active: false },
        { title: 'Step 3', active: false }
      ],
      progress: 33
    }
  }
}
</script>