Elementui源码学习仿el-drawer

//Basicstyle.myDrawerWrap{position:fixed;宽度：100%；高度：100%；顶部：0；左：0；z-指数：999；溢出：隐藏；左右位置的位置：absolute；背景色：#fff；盒子阴影：2px2px12px0rgba(0,0,0,0.24);显示：弹性；弹性方向：列；//抽屉头。drawerHeader{宽度：100%；高度：48px；框大小：边框框；填充：12px；显示：弹性；对齐项目：居中；证明内容：空格之间；字体粗细：更粗；颜色：#333；i{游标：指针；}}//抽屉内容正文part.drawerBody{宽度：100%；框大小：边框框；填充：12px；弹性：1；溢出-y：自动；}}}//遮罩层为背景色。isShowDrawerMask{background-color:rgba(0,0,0,0.3);}/*下面是抽屉过渡动画的焦点*///上面的进入和退出。topMove-enter-active,.topMove-leave-active{transition:all0.36sease-in-out;变换：翻译Y(0%)；opacity:1;}.topMove-enter,.topMove-leave{transform:translateY(-100%);opacity:0;}.topMove-leave-to{transform:translateY(-100%);opacity:0;}//下面进入和退出.bottomMove-enter-active,.bottomMove-leave-active{transition:all0.36sease-in-out;转换：翻译Y（0）；不透明度：1;}.bottomMove-enter,.bottomMove-leave{transform:translateY(100%);opacity:0;}.bottomMove-leave-to{transform:translateY(100%);opacity:0;}//leftEnterandexit.leftMove-enter-active,.leftMove-leave-active{transition:all0.36sease-in-out;转换：translateX(0%)；不透明度：1;}.leftMove-enter,.leftMove-leave{transform:translateX(-100%);opacity:0;}.leftMove-leave-to{transform:translateX(-100%);opacity:0;}//右侧进入和退出.rightMove-enter-active,.rightMove-leave-active{transition:all0.36sease-in-out;转换：translateX(0)；opacity:1;}.rightMove-enter,.rightMove-leave{transform:translateX(100%);opacity:0;}.rightMove-leave-to{transform:translateX(100%);opacity:0;}本文记录仿el-drawer组件的细节，帮助大家更好的理解饿了么UI对应组件的具体工作细节。本文是elementui源码学习模仿系列的另一篇文章，有空会持续更新模仿其他组件。源码在github上，大家可以拉下来，npmstart运行，结合注释帮助大家更好的理解。github仓库地址如下：https://github.com/shuirongsh...什么是抽屉？抽屉组件类似于弹框的对话框组件，只是UI显示略有不同。一般抽屉是左右防线弹出和缩回。上下方向不多。内码补充操作在某些情况下，抽屉组件比弹出组件更有用。有的作者不会写太多关于抽屉组件封装的分析说明。可以直接复制粘贴代码，配合代码中的注释使用。使用（结合我公司业务包）作者的抽屉组件实现，吸玉。实现主要常用的功能，道友可以做思维发散效果图使用代码时先看抽屉组件代码效果图封装抽屉组件代码//Basicstyle.myDrawerWrap{position:fixed;宽度：100%；高度：100%；顶部：0；左：0；z-指数：999；溢出：隐藏；左右位置的位置：absolute；背景色：#fff；盒子阴影：2px2px12px0rgba(0,0,0,0.24);显示：弹性；弹性方向：列；//抽屉头。drawerHeader{宽度：100%；高度：48px；框大小：边框框；填充：12px；显示：弹性；对齐项目：居中；证明内容：空格之间；字体粗细：更粗；颜色：#333；i{游标：指针；}}//抽屉内容正文part.drawerBody{宽度：100%；框大小：边框框；填充：12px；弹性：1；溢出-y：自动；}}}//遮罩层为背景色。isShowDrawerMask{background-color:rgba(0,0,0,0.3);}/*下面是抽屉过渡动画的焦点*///上面的进入和退出。topMove-enter-active,.topMove-leave-active{transition:all0.36sease-in-out;变换：翻译Y(0%)；opacity:1;}.topMove-enter,.topMove-leave{transform:translateY(-100%);opacity:0;}.topMove-leave-to{transform:translateY(-100%);opacity:0;}//下面进入和退出.bottomMove-enter-active,.bottomMove-leave-active{transition:all0.36sease-in-out;转换：翻译Y（0）；不透明度：1;}.bottomMove-enter,.bottomMove-leave{transform:translateY(100%);opacity:0;}.bottomMove-leave-to{transform:translateY(100%);opacity:0;}//leftEnterandexit.leftMove-enter-active,.leftMove-leave-active{transition:all0.36sease-in-out;转换：translateX(0%)；不透明度：1;}.leftMove-enter,.leftMove-leave{transform:translateX(-100%);opacity:0;}.leftMove-leave-to{transform:translateX(-100%);opacity:0;}//右侧进入和退出.rightMove-enter-active,.rightMove-leave-active{transition:all0.36sease-in-out;转换：translateX(0)；opacity:1;}.rightMove-enter,.rightMove-leave{transform:translateX(100%);opacity:0;}.rightMove-leave-to{transform:translateX(100%);opacity:0;}总结烂笔胜过好记完整代码在github上（还有作者封装的其他组件）