简单实现一个步骤条

发表于 |

代码部分参考ElementUI的步骤条结构，如果作为组件，循环判断每个步骤的状态，加上对应的class即可。这里定义pass、current、future，每个状态都有不同的样式。这里是横版的，竖版的大同小异

特别要注意横线的处理，移位的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div class="step-bar">
    <div class="list-item pass">
        <div class="head">
            <div class="line-wrapper">
                <i class="line"></i>
            </div>
            <div class="icon-wrapper">
                <i class="icon"></i>
            </div>
        </div>
        <div class="content-wrapper">
            <span class="content">步骤一</span>
        </div>
    </div>
    <div class="list-item current">
        <div class="head">
            <div class="line-wrapper">
                <i class="line"></i>
            </div>
            <div class="icon-wrapper">
                <i class="icon"></i>
            </div>
        </div>
        <div class="content-wrapper">
            <span class="content">步骤二</span>
        </div>
    </div>
    <div class="list-item future">
        <div class="head">
            <div class="line-wrapper">
                <i class="line"></i>
            </div>
            <div class="icon-wrapper">
                <i class="icon"></i>
            </div>
        </div>
        <div class="content-wrapper">
            <span class="content">步骤三</span>
        </div>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
.step-bar {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}

.list-item {
    flex: 1;

    .head {
    	position: relative;
    }

    .line-wrapper {
    	position: absolute;
    	height: 1px;
    	background-color: #c0c4cc;
    	/* 实现n个元素但有n-1条线的必要条件，且需要将最后的线删除 */
    	left: 50%;
    	right: -50%;
    	top: 7px;

    	.line {
            display: block;
            width: 100%;
            height: 100%;
    	}
    }

    .icon-wrapper,
    .content-wrapper {
    	text-align: center;
    }

    .content-wrapper {
    	margin-top: 6px;
    }

    &:last-of-type {
    	.line-wrapper {
            display: none;
    	}
    }

    .icon {
    	display: inline-block;
    	width: 10px;
    	height: 10px;
    	border-radius: 50%;
    	position: relative;
    	z-index: 1;
    	border: 2px solid #FFF;
    }

    &.current {
    	.icon {
    		background-color: #2298fe;
    	}

    	.content {
    		color: #2298fe;
    	}
    }

    &.pass {
    	.icon {
            background-color: #b9defe;
    	}

    	.content {
            color: #b9defe;
    	}

    	.line {
            background-color: #b9defe;
    	}
    }

    &.future {
    	.icon {
            background-color: #dfe4e8;
    	}

    	.content {
            color: #dfe4e8;
    	}
    }
}