vue抽屉_vue 自定义抽屉组件 仿 iview

最近开始制作一些小的vue组件，通过在最开始的思考该如何实现，到考虑组件的复用中，自己真的成长也了解了更多的知识点，加深了对之前一些知识点的模糊印象，现在就让我们开始吧!

GitHub地址：https://github.com/renfeiyan/VueDrawer

Drawer.vue

起初也没有这样复杂，简单的框架精简一下如下所示；

接下来进行一些样式设计: 遮罩层和抽屉面板内容本身 我们可以给他设计下层级关系，基本完成一些样式设计后基本就成形了，接下来进行下一步

考虑到组件复用性，所以我们需要用props接收一些参数，并且设置一些默认值

考虑到多个组件同时使用情况，所以我把style中的z-index提出来单独赋予它值，并在计算属性中重新计算它的值，因为它的值跟这是第几个抽屉是有关系的，在data中赋予它基本值根据父组件(使用这个组件的组件)传过来的drawerIndex层次值，进行相应计算，以达到第二层在第一层上的关系。

接下来是点击遮罩层或者是抽屉组件内部的X  ‘叉叉’ 进行关闭抽屉组件，这里我用的是css3的动画，使我点击btn的时候有个动画过