vue--"卡片层叠" 组件 开发小记

背景：影城移动点餐web App增加会员卡支付功能

需求：确认订单页点击会员卡项弹出会员卡列表，多张会员卡依次叠加覆盖上一张80%的高度，点击任意卡片则改卡片置为当前卡片，只有当前卡片显示全部卡片信息。

经过一天的分析和尝试造出了轮子，基本满足需求，核心代码如下：

代码已托管在github，想要看运行效果请移步 https://github.com/yinzifa

html代码：

?
1
2
3
4
5
6
7
8
9
<template>
    <div class="container">
        <div class="card-item" v-for="(item,index) in cardArrs"
             :class="[item.bgColor ,'z'+item.zIndex, 't'+item.zIndex*30]"
             @click.stop="changeArrIndex(index)">
            {{item.text}}
        </div>
    </div>
</template>

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<script>
    export default {
//        props: [],
        data() {
            return {
                cardArrs: [
                    {
                        text: "card-1",
                        zIndex: 1,
                        bgColor: "red"
                    },
                    {
                        text: "card-2",
                        zIndex: 2,
                        bgColor: "blue"
                    },
                    {
                        text: "card-3",
                        zIndex: 3,
                        bgColor: "yellow"
                    },
                    {
                        text: "card-4",
                        zIndex: 4,
                        bgColor: "green"
                    },
                    {
                        text: "card-5",
                        zIndex: 5,
                        bgColor: "black"
                    }
                ],
                maxLength: 5
            }
        },
        methods: {
            changeArrIndex(index){
//                if(index == this.maxLength - 1) {
//                    return;
//                }
                let _zIndex = "";
                let _newArr = [];
                this.cardArrs.forEach((item,idx)=> {
                    let _obj = {};
                    if(idx == index) {
                        _zIndex = item.zIndex;
                        _obj.zIndex = this.maxLength;
                        _obj.bgColor = item.bgColor;
                        _obj.text = item.text;
                        _obj.flag = true;
                        _newArr.push(_obj)
                    }else {
                        _newArr.push(item)
                    }
                });
                _newArr.forEach((obj)=>{
                   if(obj.zIndex == this.maxLength && !obj.flag) {
                       obj.zIndex = _zIndex;
                   }
                });
                _newArr.map((item)=>{
                    delete item.flag;
                });
                this.cardArrs = _newArr;
            }
        }
    }
</script>

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
<style scoped>
    .container {
        width: 500px;
        height: 300px;
        padding: 20px;
        border: 1px solid #ccc;
        position: relative;
    }
    .card-item {
        width: 300px;
        height: 200px;
        line-height: 198px;
        text-align: center;
        font-size: 18px;
        border-radius: 5px;
        position: absolute;
    }
    .card-item.t30 {
        top: 30px;
        animation: positionAnimate1 1.1s
    }
    .card-item.t60 {
        top: 60px;
        animation: positionAnimate1 0.9s
    }
    .card-item.t90 {
        top: 90px;
        animation: positionAnimate1 0.7s
    }
    .card-item.t120 {
        top: 120px;
        box-shadow: 0 0 2px 2px #fff;
        animation: positionAnimate 0.5s
    }
    .card-item.t150 {
        top: 150px;
        box-shadow: 0 0 2px 2px #fff;
        animation: positionAnimate 0.3s
    }
    @keyframes positionAnimate1 {
        0% {
            opacity: 0;
            transform: scale(0.9);
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }
    @keyframes positionAnimate {
        0% {
            opacity: 0;
            transform: scale(1.1);
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }
    .card-item.z1 {
        z-index:  1;
    }
    .card-item.z2 {
        z-index:  2;
    }
    .card-item.z3 {
        z-index:  3;
    }
    .card-item.z4 {
        z-index:  4;
    }
    .card-item.z5 {
        z-index:  5;
    }
    .card-item.red {
        border: 1px solid red;
        background-color: red;
    }
    .card-item.blue {
        border: 1px solid blue;
        background-color: blue;
    }
    .card-item.yellow {
        border: 1px solid yellow;
        background-color: yellow;
    }
    .card-item.green {
        border: 1px solid green;
        background-color: green;
    }
    .card-item.black {
        border: 1px solid black;
        background-color: black;
    }
</style>

　　

posted @   尹言覃少  阅读(6035)  评论(1)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示