vue手写一个步骤条steps

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

相关推荐
LBJ辉1 小时前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea8 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
hui函数11 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam11 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴85012 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
涔溪13 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
你这个年龄怎么睡得着的13 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀14 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce15 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
JSON_L15 小时前
Vue 电影导航组件
前端·javascript·vue.js