elementui源码学习之仿写一个el-card elementui源码学习之仿写一个e

本篇文章记录一下，仿写一个el-card组件，有助于大家更好理解，饿了么ui的轮子具体工作细节。本文是elementui源码学习仿写系列的又一篇文章，后续空闲了会不断更新并仿写其他组件。源码在github上，大家可以拉下来，npm start运行跑起来，结合注释有助于更好的理解。github仓库地址如下：https://github.com/shuirongsh...

个人愚见关于卡片card组件，一般在使用中，主要还是card的交互效果，比如阴影效果。饿了么官方提供的card组件除了通过传参控制阴影出现的时机，额外还提供了一个卡片头部插槽。好是好，不过一般用不到，因为卡片内容基本上都是自己写的，如果还使用头部插槽，可能需要多一些/deep/ 去控制样式，倒不如自己改写封装一个
本人看了饿了么el-card组件以后，也封装了一个my-card组件，没有加入原有的头部插槽#header，不过多加了一些交互效果，整体有以下效果：

阴影出现的时机（原有功能）
- 鼠标悬浮出现
- 总是出现
- 不出现
鼠标悬浮卡片略微上移
鼠标悬浮卡片放大一些
鼠标悬浮卡片反转（即多了一个slot="back"的插槽用于传递背面的内容）
以及控制正面、背面的样式变量cardStyle和backCardStyle

我们先看一下效果图
效果图

文章图片

大家有什么好的录制gif软件可以分享我一下哦。我的这个软件录制出来的gif效果不太好。
组件中所用到的低频知识点 perspective属性：表示咱们看到的与z=0平面的距离，可以做三维位置变换透视效果
官方：https://developer.mozilla.org...
backface-visibility:hidden属性：指定当元素背面朝向观察者时藏起来
官方：https://developer.mozilla.org...

实现思路就是将两个要展示的div利用定位重叠在一起，其中一个首先围绕Y轴旋转一定角度，然后搭配backface-visibility:hidden先藏起啦。鼠标悬浮的时候，整个旋转，就出现不可见到可见的一个效果啦，翻转动画就有喽

this.$slots属性：存放插槽的对象，可以存命名插槽、或者default普通插槽。
比如外界传递背面的内容 那么

console.log("this.$slots", this.$slots);

就可以看到是否传递进来插槽了。本例中可用于判断是否开启翻转卡片模式，然后通过:class的数组用法来动态添加类名，即可实现上述效果图
【elementui源码学习之仿写一个el-card】大家打印一下就明白，这个很简单。
使用组件的代码

.box { display: flex; flex-wrap: wrap; box-sizing: border-box; padding: 24px; .cardClass { width: 240px; margin-right: 24px; margin-bottom: 24px; } .cardClass2 { height: 180px; } }

封装的组件代码

.card-box { // background-color: #fff; /* 注意卡片盒子不能加背景色，会挡住旋转样式效果 */ color: #333; perspective: 1000; transform-style: preserve-3d; transition: all 0.4s; } // 加card-box-zoom类名，就整体放大1.08倍 .card-box-zoom:hover { transform: scale(1.08); } // 中转的用于定位的容器盒子 .card-content { position: relative; width: 100%; height: 100%; transition: 0.75s; transform-style: preserve-3d; } /* 使用front-side类名控制普通状态时的样式 */ .front-side { box-sizing: border-box; padding: 18px; border-radius: 4px; border: 1px solid #e9e9e9; transition: 0.3s; } // 有hover类名时，在hover时，就加阴影 .hover:hover { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } // 有isHoverUp类名时，就在hover时往上移动一点 .isHoverUp:hover { transform: translateY(-3px); } // 有always类名时，就加阴影 .always { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } /* 使用frontReverse和backReverse类名专门控制卡片反转状态时的样式 */ .frontReverse, // 利用定位使前后面重叠 .backReverse { position: absolute; top: 0; left: 0; right: 0; bottom: 0; backface-visibility: hidden; transform-style: preserve-3d; box-sizing: border-box; padding: 18px; border-radius: 4px; border: 1px solid #e9e9e9; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .frontReverse { z-index: 2; // 前面层级抬高 } .backReverse { transform: rotateY(-180deg); // 后面旋转不可见 } .card-reverse:hover .card-content { // hover时候，旋转容器，就会出现，不可见到可见的过程了，翻转动画就有了 transform: rotateY(180deg); }