vue手写一个步骤条steps

陌上烟雨寒2025-06-12 19:41

html 复制代码

<div
 class="step"
    v-for="(item, itemInd) in stepInfo"
    :key="item.title"
    :class="{ finish: itemInd < activeIndex, process: itemInd == activeIndex }">
    <div class="step-header">
        <div class="step-line"></div>
        <div class="step-icon"></div>
    </div>
    <div class="step-main">
        <div class="step-title">{{ item.title }}</div>
        <div class="tag-list">
            
        </div>
    </div>
</div>

js 复制代码

const activeIndex = ref(2);
const stepInfo = [
    {
        title: '证前管理',
        icon: 'folder',
    },
    {
        title: '污染排放',
        icon: 'monitor',
    },
    {
        title: '执法监管',
        icon: '执法',
    },
    {
        title: '环境安全',
        icon: '环境安全',
    },
    {
        title: '公共监督',
        icon: 'person2',
    },
];

css 复制代码

.step {
    display: flex;
    position: relative;

    .step-header {
        position: relative;
        flex-grow: 0;
        width: 12px;
        .step-line {
            width: 2px;
            top: 4px;
            bottom: -4px;
            left: 5px;
            position: absolute;
            // border-color: currentColor;
            // background-color: var(--el-text-color-placeholder);
            background: repeating-linear-gradient(
                to bottom,
                #949494,
                #949494 3px,
                transparent 3px,
                transparent 6px
            );
        }
        .step-icon {
            position: relative;
            z-index: 1;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            font-size: 14px;
            box-sizing: border-box;
            background: #949494;
        }
    }
    .step-main {
        padding-left: 10px;
        flex-grow: 1;
        // min-height: 200px;
        margin-bottom: 20px;
        .step-title {
            font-size: 16px;
            margin-bottom: 12px;
        }
    }
    // 完成状态 line和icon都点亮
    &.finish {
        .step-line {
            background: repeating-linear-gradient(
                to bottom,
                #1890ff,
                #1890ff 3px,
                transparent 3px,
                transparent 6px
            );
        }
        .step-icon {
            background: var(--el-color-primary); // 这里 --el-color-primary具体值应该是#1890ff
        }
    }
    // 当前状态 只点亮icon
    &.process {
        .step-icon {
            background: var(--el-color-primary);
        }
    }

    &:last-child {
        .step-line {
            display: none;
        }
    }
}

html 复制代码

:class="{ finish: itemInd < activeIndex, process: itemInd == activeIndex }"

关键点 ：activeIndex 控制步骤条点亮，当前步骤为process ，小于activeIndex的状态为finish