前端Vue自定义水平步骤条组件

**前端Vue自定义水平步骤条组件**

在实际的开发中，我们经常会遇到需要展示一个进度条或步骤条的需求。虽然有很多现成的库可以直接使用，但是如果我们想要实现一些特殊的功能或者定制化的样式，还是需要自己来编写一个自定义的组件。

在本文中，我们将介绍如何创建一个自定义的水平步骤条组件，支持基本的进度展示、颜色主题切换以及动画效果。

### 组件结构首先，我们需要定义这个组件的结构。我们可以使用Vue的单文件组件（SFC）来编写这个组件。

html<template>
 <div class="step-bar">
 <!-- 步骤条容器 -->
 <div class="step-container">
 <!-- 步骤条内容 -->
 <div class="steps">
 <!-- 单个步骤项 -->
 <div v-for="(item, index) in steps" :key="index" class="step-item">
 <!-- 步骤名称 -->
 <span>{{ item.name }}</span>
 <!-- 步骤进度条 -->
 <div class="progress-bar" :class="{ active: item.active }"></div>
 </div>
 </div>
 </div>
 </div>
</template>

javascript<script>
export default {
 name: 'StepBar',
 props: {
 // 步骤条数据 steps: Array,
 // 当前步骤索引 currentIndex: Number,
 // 颜色主题 theme: String },
 data() {
 return {}
 },
 computed: {},
 watch: {},
 methods: {}
}
</script>

css.step-bar {
 /* 步骤条容器 */
 .step-container {
 /* 步骤条内容 */
 .steps {
 /* 单个步骤项 */
 .step-item {
 /* 步骤名称 */
 span {
 font-size:14px;
 color: #666;
 }
 /* 步骤进度条 */
 .progress-bar {
 width:20px;
 height:2px;
 background-color: #ccc;
 border-radius:10px;
 transition: all0.3s ease-in-out;
 }
 /* 激活步骤项 */
 &.active {
 .progress-bar {
 background-color: #4CAF50;
 }
 }
 }
 }
 }
}

html<template>
 <div>
 <!-- 步骤条组件 -->
 <StepBar :steps="steps" :currentIndex="currentIndex" :theme="theme" />
 </div>
</template>

<script>
import StepBar from './StepBar.vue'

export default {
 name: 'App',
 components: { StepBar },
 data() {
 return {
 steps: [
 { name: '步骤1', active: false },
 { name: '步骤2', active: true },
 { name: '步骤3', active: false }
 ],
 currentIndex:1,
 theme: 'default'
 }
 },
 methods: {}
}
</script>