Elementui源码学习模仿el-card

.box{显示：弹性；弹性包装：包装；框大小：边框框；填充：24px；.cardClass{宽度：240px；右边距：24px；底部边距：24px；}.cardClass2{高度：180px；style>封装组件代码.card-box{//背景颜色：#fff;/*注意卡片框的背景色不能加，会挡住旋转样式的效果*/color:#333;视角：1000；变换样式：保留3d；transition:all0.4s;}//添加card-box-zoom类名，整体缩放1.08倍。card-box-zoom:hover{transform:scale(1.08);}//定位容器框在transit.card-content{position:relative;宽度：100%；高度：100%；过渡：0.75s；transform-style:preserve-3d;}/*使用前端类名控制正常状态的样式*/.front-side{box-sizing:border-box;填充：18px；边界半径：4px；边框：1px实心#e9e9e9；transition:0.3s;}//当有hover类名时，hover时，添加一个shadow.hover:hover{box-shadow:02px12px0rgba(0,0,0,0.1);}//当有一个isHoverUp类名，悬停时向上移动一点。isHoverUp:hover{transform:translateY(-3px);}//有always类名时，加阴影。always{box-shadow:02px12px0rgba(0,0,0,0.1);}/*使用frontReverse和backReverse类名专门控制卡片反转时的样式*/.frontReverse,//使用定位使前后重叠。backReverse{position:absolute;顶部：0；左：0；右：0；底部：0；背面可见性：隐藏；变换样式：保留3d；框大小：边框框；填充：18px；边界半径：4px；边框：1px实心#e9e9e9；box-shadow:02px12px0rgba(0,0,0,0.1);}.frontReverse{z-index:2;//前水平升高}.backReverse{transform:rotateY(-180deg);//反向旋转是不可见的}.card-reverse:hover.card-content{//悬停时，旋转容器，会出现，可见过程不可见，翻转动画会有transform:rotateY(180deg);}本文记录，模仿el-card组件，帮助大家更好的理解饿了么UI轮子的具体工作细节。本文是elementui源码学习模仿系列的另一篇文章，有空会持续更新模仿其他组件。源码在github上，大家可以拉下来，npmstart运行，结合注释帮助大家更好的理解。github仓库地址如下：https://github.com/shuirongsh...个人愚见，卡片组件一般都在用，主要是卡片的交互效果，比如阴影效果.饿了么官方提供的卡片组件除了通过传参控制阴影出现的时机外，还提供了卡片头槽。不错，但是一般用不到，因为卡片的内容基本都是自己写的。如果你仍然使用headerslot，你可能需要更多/deep/来控制样式。不如自己改写打包。饿了么el-card组件安装完成后，还封装了一个my-card组件。没有增加原来的header槽#header，而是增加了一些交互效果，整体效果如下：阴影出现的时机（原函数）mousehoveringcardslightlyup放大一些鼠标悬停的卡片Reverse（也就是多了一个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属性：存储槽的对象，可以存储命名槽或默认普通槽。比如外界传输