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>

转载于:https://www.cnblogs.com/zifayin/p/8056306.html

vue--卡片层叠组件开发小记相关推荐

vue两个卡片并排_vue--卡片层叠组件开发小记
背景:影城移动点餐web App增加会员卡支付功能需求:确认订单页点击会员卡项弹出会员卡列表,多张会员卡依次叠加覆盖上一张80%的高度,点击任意卡片则改卡片置为当前卡片,只有当前卡片显示全部卡片信息 ...
Vue拖拽组件开发实例
为什么选择Vue? 主要原因:对于前端开发来说,兼容性是我们必须要考虑的问题之一.我们的项目不需要兼容低版本浏览器.项目本身也是一个数据驱动型的.加之,Vue本身具有以下主要特性: 使用虚拟DOM: ...
java和vue实现拖拽可视化_Vue拖拽组件开发实例详解
摘要:这篇Vue栏目下的"Vue拖拽组件开发实例详解",介绍的技术点是"Vue拖拽组件开发实例.vue拖拽组件.拖拽组件.组件开发.开发实例.实例详解",希望对 ...
jsx怎么往js里传参数_实践Vue 3.0做JSX(TSX)风格的组件开发
作者:莫夭转发链接:https://zhuanlan.zhihu.com/p/102668383 前言我日常工作都是使用React来做开发,但是我对React一直不是很满意,特别是在推出React ...
基于Vue.js的后台管理系统组件开发
什么是Vue Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合. ...
vue tree组件_使用Vue 3.0做JSX(TSX)风格的组件开发
前言我日常工作都是使用React来做开发,但是我对React一直不是很满意,特别是在推出React Hooks以后. 不可否认React Hooks极大地方便了开发者,但是它又有非常多反直觉的地方, ...
[Vue.js] 深入 -- 组件化开发
组件化开发思想现实中的组件化思想体现标准分治重用组合组件注册全局组件注册语法 Vue.component(组件名称,{data:组件数据,template:组件模板内容 }) 组件用法 ...
vue 圆形水波_vue 开发波纹点击特效组件
最近在使用 vue2 做一个新的 material ui 库,波纹点击效果在 material design 中被多次使用到,于是决定把它封装成一个公共的组件,使用时直接调用就好啦. 开发之前的思考 ...
3个概念，入门 Vue 组件开发
"组件"是 Vue 中比较基础的概念,但我发现,许多同学对 Vue 组件的概念和由来并不是清楚.因此,我希望通过这个专题,带大家换个角度来分析,最终让大家更清楚组件开发. 首先,我 ...

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

vue--卡片层叠组件开发小记相关推荐

最新文章

热门文章

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

vue--卡片层叠 组件 开发小记相关推荐

最新文章

热门文章

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

vue--卡片层叠组件开发小记相关推荐