当前位置：首页 > news >正文

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

news 2025/9/6 12:09:41

一、引言

二、代码介绍

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