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

本篇文章记录一下，仿写一个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的数组用法来动态添加类名，即可实现上述效果图

大家打印一下就明白，这个很简单。

使用组件的代码

封装的组件代码

至于css兼容性的话，大家可以自己加上浏览器厂商的后缀呗

总结

• 复制粘贴，即可出现效果。
• 如果对您有一点点帮忙，欢迎github给个star哦
• 因为是系列文章，您的鼓励是咱创作的动力^_^