前端笔记：基于Dialog自定义实现类似抽屉效果
目录
一、引言
二、代码介绍
2.2 CSS部分
定位与尺寸
动画效果
2.3 JS部分
2.4 完整的代码示例
2.5 运行效果
三、总结
一、引言
今天在维护vue2框架的一个业务系统遇到这样一个问题，有一个需求需要实现类似于购物车的效果，因为本身框架使用的是ElementUI框架，首先想到的就是使用官方提供的el-drawer。
所以按照官方文档准备在现有系统写一个Demo，写完之后调试了半个小时。始终无法实现抽屉的效果。最后看了下elementui的版本是2.10.1，最后发现这个版本是不支持抽屉组件的。
考虑到属于老项目并且一直运行比较稳定，如果贸然升级elementui基础框架的话风险还是非常大的。最后决定基于ElementUI的Dialog组件自定义的方式来实现抽屉的效果。下面给大家分享具体实现的过程，感兴趣的前端朋友可以看一看！
二、代码介绍
这部分相对比较简单，直接使用Dialog组件的基本结构，然后通过自定义模板实现类似抽屉的标题栏和内容区域。
2.2 CSS部分
这部分是核心，需要定位对话框位置在页面最右侧，并且实现类似于抽屉从右向左滑动的效果。
定位与尺寸
- 使用
position: fixed将Dialog固定到视口右侧 - 设置
height: 100vh实现全高效果 - 通过
right: 0和top: 0定位到右上角 - 去除默认的圆角(
border-radius: 0)和边距(margin: 0)
动画效果
页面初始状态使用transform: translateX(100%)将Dialog对话框隐藏在右侧之外，需要打开对话框的时候通过CSS transition实现平滑的滑入效果。
.drawer-dialog {transform: translateX(100%);transition: transform 0.3s ease-out;
}.drawer-dialog.dialog-fade-enter-active {transform: translateX(0);
}2.3 JS部分
主要是实现抽屉的展示、隐藏逻辑、状态管理、计算抽屉的宽度功能。
2.4 完整的代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>右侧滑出抽屉组件</title><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Helvetica Neue', Arial, sans-serif;back