前端笔记：基于Dialog自定义实现类似抽屉效果

图片

今天在维护vue2框架的一个业务系统遇到这样一个问题，有一个需求需要实现类似于购物车的效果，因为本身框架使用的是ElementUI框架，首先想到的就是使用官方提供的el-drawer。

图片

所以按照官方文档准备在现有系统写一个Demo，写完之后调试了半个小时。始终无法实现抽屉的效果。最后看了下elementui的版本是2.10.1，最后发现这个版本是不支持抽屉组件的。

图片

考虑到属于老项目并且一直运行比较稳定，如果贸然升级elementui基础框架的话风险还是非常大的。最后决定基于ElementUI的Dialog组件自定义的方式来实现抽屉的效果。下面给大家分享具体实现的过程，感兴趣的前端朋友可以看一看！

二、代码介绍

这部分相对比较简单，直接使用Dialog组件的基本结构，然后通过自定义模板实现类似抽屉的标题栏和内容区域。

2.1 CSS部分

这部分是核心，需要定位对话框位置在页面最右侧，并且实现类似于抽屉从右向左滑动的效果。

定位与尺寸

• 使用position: fixed将Dialog固定到视口右侧

• 设置height: 100vh实现全高效果

• 通过right: 0和top: 0定位到右上角

• 去除默认的圆角(border-radius: 0)和边距(margin: 0)

动画效果

页面初始状态使用transform: translateX(100%)将Dialog对话框隐藏在右侧之外，需要打开对话框的时候通过CSS transition实现平滑的滑入效果。

2.2 JS部分

主要是实现抽屉的展示、隐藏逻辑、状态管理、计算抽屉的宽度功能。

2.3 完整的代码示例

2.4 运行效果

为了方面可以直接运行。这里直接采用了CDN方式引入js和css。复制代码后可以直接保存为html文件然后直接浏览器打开。预览效果如下：

图片

首先测试点击25%宽度

图片

然后测试点击75%宽度

图片

三、总结

以上功能是一个相对比较简单的基于Dialog自定义实现类似抽屉效果的实用案例。对于一些老项目无法升级ElementUI基础框架且美观和业务相对简单的情况下还是值得推荐尝试的一种方案。如果是新项目推荐直接升级框架的方式最靠谱。官方提供的el-drawer才是最优的选择。当然大家如果使用过程中有啥问题的话可以评论区沟通交流！

作者声明本文无利益相关，欢迎值友理性交流，和谐讨论～