模态框封装

发布于:2025/9/1
4
内容创作
开发
教育

用户输入

基于Naive UI 封装一个Modal 框核心功能要求 多语言支持:完整的中英文国际化 模态弹框:用户操作对话框 可拖拽:支持鼠标拖拽移动位置 可调整大小:支持最大化/还原操作 固定布局:头部、内容区、底部明确分区 交互特性 头部固定:包含标题和操作按钮 内容可滚动:主体内容区域支持滚动 底部固定:操作按钮区域固定位置 视觉层次分明:清晰的视觉区分和间距

提示词

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

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

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

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

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