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;

}

element-ui element-plus合并行、el-table 行合并,可以指定要合并行的列名称 效果图 这里只设置合并了前三列,可以通过参数自己定义 1.使用 导入js文件,并设置需要合并的列 //导入js文件(文件脚本内容在下文) import {getRowspanMethod} from '@/hook/el-tables/use-span-method.js' //调用函数并导出需要的合并列函数 注意需要根据 //data为查询到的数据 //['prop1', 'prop2', 'prop3'] 需要合并的列 const spanMethod=getRowspanMethod(data,[ 阅读详情

相关推荐

vue elementUI实现双(多)列表格,内容均自定义

需求类似这样的: 使用普通table实现,样式需要自己设置: <table class="person-info" border="1" cellspacing="0"> <tbody> <tr> <th>档案编号</th> <td>{{ personInfo.name }}</td> <th>姓名</th> &

是日前端 7776

循环表单数据两栏展示

循环表单数据两栏展示 <el-form ref="form" label-width="150px"> <el-card class="box-card"> <el-row :gutter="24"> <div v-for="(item,index) in taskDetailData.parent" :key="index

weixin_50659005的博客 850

swipecard层叠卡片效果

RecyclerView实现层叠卡片特效,禁止拖拽滑动指定item。保持只能拖拽顶层卡片 详情见: https://blog.youkuaiyun.com/shoneworn/article/details/80924047

vue两个卡片并排_vue卡片拖拽、自动排列交换位置、拖拽数据存取

this.$set(this.linkArr[index],'name',“小王”);这是这次系列文章的第一篇,我自己封装了一个用vue实现的拖动卡片组件,并且发布到npm,详细地记录下来了整体制作过程。总共有三篇文章,介绍组件的制作思路和遇到的问题,以及在发布到npm上并下载使用的过程中,发生了什么问题并如何解决。第二篇为组件的实现思路以及遇到的问题第三篇为将组件打包并上传至npm,如何实现按需...

weixin_35110758的博客 1920

14种炫酷堆叠卡片切换动画特效

插件描述:14种炫酷堆叠卡片切换动画特效。 参考实例:http://www.jq22.com/jquery-info5672

vue.js多张银行卡切换特效代码

vue.js多张银行卡切换代码是一款基于vue.js+css3制作的仿支付宝多张银行卡收缩切换。

el-card多个卡片布局

Row AttributesCol Attributes <el-row :gutter="20"> <el-col :span="16"><el-card></el-card> <el-row :gutter="16" style="margin-top:10px;"> <el-col :span="12">

00年女程序员分享自己的学习笔记 1万+

基于YOLOX与LPRNet的车牌检测与识别系统(Python+UI界面)实战指南

本文详细介绍了如何利用YOLOX目标检测模型与LPRNet车牌识别模型,从零构建一个完整的车牌检测与识别系统。通过解析CCPD数据集、训练深度学习模型,并最终集成到PyQt5开发的图形化UI界面中,提供了一个从数据处理到应用部署的完整实战指南,帮助开发者快速掌握智能交通系统中的关键技术。

weixin_29230901的博客 338

vue中组件叠加显示

提示:只提供简单可行的方案,没有深入研究,本意是记录一下成果 假设A组件要叠加在B组件上显示,效果如下图: 我们只需要将A组件进行如下设置: 设置A组件的宽高,使用px为单位 A组件与B组件只作为首页的一部分进行引入显示,所以在首页vue文件,再对A组件进行设置,关键点: 使用absolute进行绝对定位,自行设置该组件显示在哪里 z-index:可以理解为叠加显示的优先级,数值高的叠在数值低的上方显示 如果只存在两个组件叠加显示,则被叠加的组件无需进行设置 ...

weixin_45928161的博客 6499

免费测试国外大模型Claude 3.7 Sonnet API:无需api key(秘钥)

Claude 3.7 Sonnet是Anthropic公司推出的第三代Claude系列AI模型中的中规模版本(2024年发布),在性能与效率间实现平衡。该模型基于改进的Transformer架构,支持128K上下文窗口,擅长复杂推理、数学计算和创意写作,在GSM8K数学基准测试中准确率达92%。其采用"宪法AI"伦理框架,通过多轮对抗训练减少有害输出,同时新增多模态理解能力(可解析图片/图表内容)。Claude 3.7 Sonnet是Anthropic推出的高效轻量级大模型,主打快速响应与成本优化。

Explinks的博客 1497

S7-1200PLC期末复习题(第七章)

A.0 B.1 C.4 D.-4 A、CV = 0 B、CV = 1 C、CV < 4 D、CV >= 4A、0,0 B、3,0 C、1,1 D、3,1 A、0 B、1 C、先是1,再变为0 D、先是0,再变为1置位输出:常开触点M0.0闭合,Q0.0变为1状态并保存该状态,即使M0.0断开,Q0.0也保持1状态。 复位输出:常开触点M0.1闭合时,Q0.0变为0状态并保持该状态,即使M0.1断开,Q0.0也保持为0状态。 A、1 B、0 C、5 D、10RESET_BF指令需要两个参数,第一个是复位的位数

qq_52251819的博客 4420

用 Vue.js 写一个层叠卡片滑动切换、卡牌动态滑动切换效果

vue-slide-card Vue 层叠卡片滑动切换、卡牌动态滑动切换效果 效果展示 线上 demo 演示 实现步骤 给最外层容器固定高度(视口高度),绑定三个滑动事件 hmtl: <template> <div @touchstart="playerTouchStart" @touchmove="playerTouchMove" ...

Kevinblant的博客 8674

机器人学习-matlab四足机器人控制仿真

《机器人学,机器视觉与控制》学习笔记 使用工具箱版本9.10 题目与解决思路: 【1】. 通过减少复位期间的抬腿高度来缩短复位的轨迹 Z轴向下,为了减小复位器件的抬腿高度,应当缩小△Z,故可以将示例程序中zu值调大。 【2】. 增加腿的步幅 腿的步幅可由改变x方向上腿前进和后退运动的极限来达到,令xf = 7; xb = -xf;即可。 ...

weixin_44609769的博客 5538

叠加券功能

实现叠加券功能,未仔细测试,使用需谨慎

weixin_43110440的博客 488

五、e2studio VS STM32CubeIDE之汉化

介绍stm32cubeide汉化方案和汉化包e2studio自带汉化包,在安装过程中可选择安装e2studio STM32CubeIDE切换中英文。

cl234583745的博客 1766

智能变电站协议系列-1、GOOSE、SV、MMS协议简介及GOOSE示例运行问题(IEC61850)

目前有一个新的研究,关于电网使用的GOOSE、SV、MMS协议,并使用相关库来做一下测试。由于goose、sv、mms等都属于IEC61850,因此,需要对IEC61850相关内容有一些了解,都是国际标准,属于电气自动化的一部分,对于自动化或者电气相关领域有接触的专业应该或多或少有一些了解。IEC61850目标是用于变电站自动化、分布式能源、水力和天然气发电厂、风力发电厂、电动汽车作为分布式能源等领域,目前似乎在变电站自动化方面的推广和使用更加广泛。

逍遥游的博客 2万+

vue项目的card的组件

<div class="main-body-text-card"> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>{{card_header}}</span> <el-bu...

MOWENDAO的博客 6805

Zotero插件安装保姆级教程:从Jasminum到Sci-Hub,一站式搞定文献管理

本文提供Zotero插件安装的保姆级教程,从Jasminum到Sci-Hub,一站式搞定文献管理。通过详细配置和实战案例,帮助用户高效构建文献工作流,提升研究效率。重点介绍了元数据抓取、PDF管理、文献分析和知识产出等关键插件的使用方法。

weixin_42531516的博客 171

vue前端之基于vant-ui的card卡片组件的商品购物车修改的简单实现、复选框批量选择、全选反选按钮

vue前端之基于vant-ui的商品购物车的简单实现

bentou_的博客 1万+

基于Simulink的伺服电机位置闭环控制仿真

本文带你从零构建了伺服电机位置闭环控制系统​ 的完整Simulink仿真模型,实现了:✅ 搭建PMSM伺服电机、逆变器、机械臂负载的主电路与编码器反馈模型;✅ 用MATLAB Function实现三环控制(位置环PID、坐标变换、电流环PI);✅ 验证阶跃定位(稳态误差0.002°、响应0.08s)与正弦跟踪(误差0.008°)的高性能;✅ 对比开环控制,明确位置闭环在精度、响应、抗扰上的优势;✅ 理解“三环嵌套+反馈校正”的核心思想(精密定位的工程实现)。核心收获。

amy_mhd的博客 173

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

vue两个卡片并排_Vue组件-卡片层叠拖拽

组件效果tantan.gif项目地址npm安装npm install vue-tantan-stack --save如何使用prevnextimport stack from '../components/stack'export default {el: '#stack',data () {return {someList: [],stackinit: {visible: 3}}},mounte...

weixin_32629853的博客 1942

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

vue3 组件篇 Card

card组件在我们日常开发中经常使用,如果能够有一个较好的封装,将会省去很多的重复代码,提高开发效率。要与cardGroup相结合能够实现水平排列和垂直排列,或者瀑布流排列。提供了线上的体验网站,欢迎大家前来,并提出你的建议。必须分为标题和内容两部分,并且都支持自定义。card组件需要实现哪些功能呢。提供一种或多种hover特效。card提供点击事件用以交互。......

秋来九月八 6415

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

vue两个卡片并排_VUE+WebPack游戏设计:实现两张扑克牌的逐对厮杀特效

本节,我们开始进行两张扑克牌对战时的情景设计,当用户从底部选中一张扑克牌后,系统需要产生一张对手扑克牌,这样两张牌才能相互较量,接下来我们先实现如何引入敌对扑克牌。在gamescenecomponent.vue中,我们先添加敌对扑克牌的定义,在标签template中,添加如下代码:back接着在script标签中添加相关变量的定义,以及控制敌对扑克牌的逻辑代码,首先添加几个变量定义:import...

weixin_29944883的博客 686

vue 封装一个 层叠轮播图的 小组件

直接上效果还看下哈 由于不让上传超过5M的图片 就切换了了 两下 就4M了 尴尬了 直接上 组件 我搞了一个 Carousel.vue的组件 <template> <div class="carousel" ref="carousel"> <div class="whole"> <div class="roll-img"> <span class="last" @click="after" v-...

业余前端的职业经历 2649

前端-VUE-页面布局-flex布局整理-傻瓜教学

1.flex-direction:设置容器内部元素的排列方向 row: 定义排列方向 从左到右 row-reverse: 从右到左 column: 从上到下 column-reverse: 从下到上 图片介绍 flex-direction:row flex-direction:row-reverse flex-direction:column flex-directi...

翩翩潇洒程序员 1万+

VUE

什么是VUE? 前端框架。Vue的核心库只关注视图层。综合了Angular(模块化:MVVM)和 React(虚拟DOM:利用内存)的优点

qq_55137734的博客 658
上一篇: python面向对象类的成员_20.Python面向对象之:类的成员
下一篇: js向action传值乱码_分享一个js向Action传中文参数时出现乱码的问题以及如何解决...
辜进喜
博客等级 码龄9年 31粉丝 69原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值