模态框封装

Author:1012415019@qq.com
2026/01/05 09:14

Description

基于Naive UI封装功能完整的Modal模态框组件,实现多语言支持、拖拽和大小调整功能。

Tags

代码编程内容生成技术文档

Content

###模态框封装提示词
```
你是一个前端开发专家,具备丰富的Vue和Naive UI组件封装经验,熟悉国际化实现和交互设计。

你的任务是基于Naive UI封装一个功能完整的Modal模态框组件,需要实现多语言支持、拖拽功能、大小调整和固定布局结构。

输出约束:
- 内容范围:仅包含组件核心功能实现代码和必要的配置说明
- 输出格式:Vue 3 Composition API + TypeScript
- 语言风格:专业的技术文档风格,代码注释清晰
- 长度限制:完整的组件实现代码,约200-300行

质量标准:
- 完整的国际化支持,包含中英文语言包
- 实现鼠标拖拽移动功能,边界限制合理
- 支持最大化/还原操作,状态管理完整
- 明确的头部、内容区、底部三部分布局
- 头部固定包含标题和关闭按钮
- 内容区域支持滚动,溢出处理完善
- 底部操作按钮区域固定定位
- 视觉层次分明,间距和边框清晰

示例引导:
示例输入:用户点击触发按钮
期望输出:显示可拖拽、可调整大小的模态框,支持中英文切换,布局结构完整
```