vue 自定义步骤条组件 自定义图片（icon）

1
2
3
4
组件  Steps.vue

css

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
// css
<style lang="less" scoped>
    .step01, .step02, .step03, .step04, .step05, .step06{
        width: 20px;
        height: 20px;
        background-size: 100% 100%;
        display: inline-block;
    }
    .step01{
        background-image: url("../assets/image/Steps/Steps5.png");
    }
    .step02{
        background-image: url("../assets/image/Steps/Steps6.png");
    }
    .step03{
        background-image: url("../assets/image/Steps/Steps1.png");
    }
    .step04{
        background-image: url("../assets/image/Steps/Steps2.png");
    }
    .step05{
        background-image: url("../assets/image/Steps/Steps4.png");
    }
    .step06{
        background-image: url("../assets/image/Steps/Steps3.png");
    }
    .li_active {
        .step01{
            background-image: url("../assets/image/Steps/StepsActive5.png");
        }
        .step02{
            background-image: url("../assets/image/Steps/StepsActive6.png");
        }
        .step03{
            background-image: url("../assets/image/Steps/StepsActive1.png");
        }
        .step04{
            background-image: url("../assets/image/Steps/StepsActive2.png");
        }
        .step05{
            background-image: url("../assets/image/Steps/StepsActive4.png");
        }
        .step06{
            background-image: url("../assets/image/Steps/StepsActive3.png");
        }
    }
    .steps {
        position: relative;
    }
    /*步骤描述*/
    .steps li {
        list-style-type: none;
        font-size: 12px;
        text-align: center;
        width: 15%;
        position: relative;
        float: left;
        height: 66px;
        p{
            width: 35px;
            height: 35px;
            border: 1px solid rgba(216,216,216,1);
            border-radius: 50%;
            line-height: 43px;
            position: absolute;
            top: 0;
            left: 20px;
            background-color: #fff;
        }
        .text{
           position: absolute;
            bottom: 0;
            left: 20px; 
        }
        
        .li_active{
            border-color: rgba(41,156,245,1);
            color: rgba(41,156,245,1);
        }
    }

    /*连接线*/
    .steps li ~ li:after {
        content: "";
        width: 100%;
        height: 2px;
        border: 1px solid rgba(41,156,245,1);
        background-color: #fff;
        position: absolute;
        left: -50%;
        top: 15px;
        z-index: -1; /*放置在数字后面*/
    }

    /*将当前/完成步骤之前的数字及连接线变绿*/
    .steps li.active:before,
    .steps li.active:after {
        border: 1px solid rgba(41,156,245,1);
        background-color: #fff;
    }

    /*将当前/完成步骤之后的数字及连接线变灰*/
    .steps li.active ~ li:before,
    .steps li.active ~ li:after {
        border: 1px solid rgba(216,216,216,1);
        background-color: #fff;
    }
</style>

1
2
html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// html
<template>
    <div>
        <ul class="steps">
            <li
                v-for="(item,index) in SetData"
                :key="index"
                :class="{'active':Steps-1===index}"
            >
                <p :class="{'li_active':Steps>index}">
                    <i :class="item.icon"></i>
                </p>
                <div class="text" :class="{'li_active':Steps>index}">
                    {{item.title}}
                </div>
            </li>
        </ul>
    </div>
</template>

1
2
js

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
// js
<script>
export default {
    name:'Steps',
    props:{
        Steps:{
            type:Number,//数据类型
            default:1//默认值
        },//当前激活个数
    },
    data() {
        return {
            SetData : [
                {
                    title:'已立案',
                    icon:'step01'
                },
                {
                    title:'已立案',
                    icon:'step02'
                },
                {
                    title:'已立案',
                    icon:'step03'
                },
                {
                    title:'已立案',
                    icon:'step04'
                },
                {
                    title:'已立案',
                    icon:'step05'
                },
                {
                    title:'已立案',
                    icon:'step06'
                },
            ],
        }
    },
    watch: {},
    mounted() {},
    computed: {},
    components: {},
    methods: {

    },
}
</script>

1
2
实现效果