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

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

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

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

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

html代码：

<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代码：

<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代码：

<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>