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

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

GitHub地址&＃xff1a;https://github.com/renfeiyan/VueDrawer

Drawer.vue

起初也没有这样复杂&＃xff0c;简单的框架精简一下如下所示&＃xff1b;

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

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

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

接下来是点击遮罩层或者是抽屉组件内部的X  ‘叉叉’ 进行关闭抽屉组件&＃xff0c;这里我用的是css3的动画&＃xff0c;使我点击btn的时候有个动画过程&＃xff0c;较为美观一点&＃xff0c;通过改变组件的可见或者是不可见&＃xff0c;来实现关闭功能&＃xff0c;具体的点击方法请看第一张图&＃xff0c;使用的条件渲染v-if &＃xff0c;通过数据绑定 就可以避免多许多代码 。 当然自己封装的组件 尽量要让别人能够看懂 &＃xff0c; 最好是自己 一边写一边备注 &＃xff0c; 这样自己以后看的时候也会方便许多 &＃xff1b;

这个方法太多余&＃xff0c;见替换方法如下图

进行双向数据绑定即可达到效果

自定义动画

这是我使用它的时候&＃xff0c;写的双层代码&＃xff0c;也使用了具名插槽 以达到效果 效果图如下 点击 遮罩层 和小叉叉 都可以进行关闭。

因为我还是个前端学习者&＃xff0c;有任何问题或者bug欢迎向我提出&＃xff0c;以便做出及时更改&＃xff0c;一起加油啦!

~~~~~~~~~~~~~~~2019/8/11更新

这是更改后的另外一个版本&＃xff0c;更简单&＃xff0c;比我之前写的&＃xff0c;请继续向下看