vue两个卡片并排_vue--"卡片层叠" 组件 开发小记

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

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

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

html代码：

:class="[item.bgColor ,'z'+item.zIndex, 't'+item.zIndex*30]"

@click.stop="changeArrIndex(index)">

{{item.text}}

js代码：

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;

}

}

}

css代码：

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

}