动手：弹窗与表单验证

你要做什么

点击按钮弹出表单弹窗，包含字段验证、错误提示、loading 状态。

⏱️ 25 分钟 | 🛠️ Vue 3

跟着做

帮我做一个模态弹窗表单（Vue 3）：
1. 页面上一个"联系我们"按钮，点击弹出遮罩层+弹窗
2. 表单包含：姓名、邮箱、留言三个字段
3. 验证规则：姓名不为空，邮箱格式正确，留言至少 10 字
4. 错误时在字段下方显示红色提示文字
5. 提交时显示 loading 状态，模拟 2 秒后成功
6. 成功后显示"发送成功"提示，2 秒后自动关闭
7. 点击遮罩层或右上角 X 关闭弹窗
8. ESC 键也能关闭

理解表单验证

表单验证的核心流程：

用户输入 → 实时校验 or 提交时校验 → 
有错误 → 显示错误提示 → 用户修正 → 
无错误 → 提交 → 显示 loading → 处理结果

🎯 进阶挑战

• 支持手机号验证
• 加上”我同意条款”的复选框
• 表单数据发送到真实的后端 API

✅ 你做到了

• 掌握了弹窗组件的完整实现
• 理解了表单验证的逻辑
• 学会了遮罩层、ESC 关闭等交互细节