基于Vue与Ant Design Vue的Modal弹窗深度定制：拖拽与全屏功能的无缝集成

1. 为什么我们需要一个“超级弹窗”？

在后台管理系统、数据看板或者复杂的表单录入页面里，弹窗（Modal）是我们最常用的交互组件之一。Ant Design Vue 提供的 Modal 组件功能已经非常强大了，开箱即用，样式美观。但不知道你有没有遇到过这样的场景：一个内容超长的表单弹窗，用户需要上下反复滚动才能填写，操作起来非常不便；或者在一个多任务并行处理的界面，用户希望能把某个重要的弹窗拖到屏幕角落，以便同时参考其他页面内容。

我接手过不少项目，最初都是直接使用原生的 a-modal，直到产品和用户开始提需求——“这个弹窗能不能全屏显示，内容太多了看不清”、“这个提示框挡着我看下面的数据了，能挪开吗？”。这时候，如果去每个用到弹窗的页面单独写拖拽逻辑和全屏按钮，不仅工作量巨大，而且代码会变得难以维护，风格也无法统一。

所以，对 Ant Design Vue 的 Modal 组件进行一次“深度美颜”和“功能升级”，把它封装成一个兼具拖拽和全屏能力，同时完全兼容原有所有属性的“超级弹窗”组件，就成了一件性价比极高的事情。这次封装的目标很明确：让业务开发同学像使用原版 Modal 一样简单，只需替换组件名并添加一两个新属性，就能立刻获得这两个高级功能，把精力完全聚焦在业务逻辑本身。

2. 核心思路：不破坏原有的优雅

在开始动手写代码之前，我们必须定下几条铁律，这也是二次封装的灵魂所在：

1. 属性无损传递：原有的 a-modal 所有 props、events 和 slots 必须 100% 兼容。使用者之前怎么写，封装后还怎么写，无需改变习惯。
2. 功能可插拔：拖拽和全屏应该是可选的，最好能通过属性轻松开启或关闭。
3. 样式隔离与继承：新增的功能样式不能污染全局，也不能被父组件样式意外覆盖，同时要完美继承 Ant Design 的视觉风格。
4. 易于维护：代码结构要清晰，将拖拽、全屏等逻辑模块化，方便后续增加其他功能（比如记忆位置、缩放等）。

基于这些原则，我们的技术方案就清晰了。拖拽功能，我们选择借助一个优秀的工具库 @vueuse/core 中的 useDraggable 组合式函数，它能帮我们省去大量鼠标事件处理的底层代码。全屏功能，则主要通过动态修改 Modal 的样式类名和宽度来实现。整个组件的结构会采用“主体容器 + 功能子组件”的方式，让职责分离。

3. 一步步打造可拖拽的弹窗标题栏

拖拽是整个功能里最有趣的部分。我们的目标是：只有按住标题栏拖动时，整个弹窗才会移动。这很符合用户直觉。

3.1 使用 VueUse 的拖拽钩子

首先，我们需要安装并引入核心工具：

npm install @vueuse/core

@vueuse/core 是一个宝藏库，提供了大量开箱即用的 Vue 3 组合式函数。我们用它的 useDraggable。

在组件的 setup 中，我们为标题栏元素创建一个 ref，并将其交给 useDraggable：

import { useDraggable } from '@vueuse/core';

// 模板中标题栏的 ref
const modalTitleRef = ref<HTMLElement>();
// 使用拖拽钩子，它会返回位置坐标和拖拽状态
const { x, y, isDragging } = useDraggable(modalTitleRef);

就这么几行代码，modalT