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

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

什么是抽屉drawer组件

  • 同弹框dialog组件类似,UI展示略有不同
  • 一般抽屉是左右防线弹出和收回,上下方向不多
  • 可在抽屉内部进行代码补充操作
  • 某些情况下,抽屉组件比弹框组件更加好用一些

笔者关于抽屉组件的封装,就不写太多的解析说明了,大家可以直接复制粘贴代码,搭配代码中的注释进行使用(结合自己公司业务封装)

笔者的抽屉组件实现,抛砖引玉。实现主要常用的功能,道友们可以进行思维发散

效果图

先看一下抽屉组件的效果图

代码

使用时的代码



封装的抽屉组件代码





总结

  • A bad pen is better than a good memory
  • 完整代码在github上哦(还有其他笔者封装的组件)

你可能感兴趣的:(elementui源码学习之仿写一个el-drawer)