前端开发

PHP 升级公告弹窗组件生成器

输入升级时间与影响范围 → 产出公告弹窗 Vue 组件与验收项

发布于 2026-10-27 11:35:02 浏览 7

适用场景

  • 升级公告弹窗
  • 组件封装
  • 兼容旧浏览器
PROMPT
升级公告要在后天挂出去,前端手上有设计稿和旧站点的浏览器分布,今天要交一个能直接嵌进旧页面的弹窗组件。

【角色】
1. 按 Vue 3 组合式写法出组件,不引入 UI 库,样式自包含。
2. 组件同时支持旧页面的 script 引入与打包引入两种用法。
3. 交付含示例页,能在本地直接打开看效果。

【目标】
1. 弹窗展示升级时间、影响范围、联系方式三块信息。
2. 支持「今天不再提示」,用 localStorage 记住,七天有效。
3. 移动端宽度自适应,最小支持 320 宽。

【背景】
1. 站点是老的 PHP 服务端渲染页面,只挂了 Vue 3 的 CDN。
2. 用户浏览器里仍有 8% 是较旧版本,不支持可选链写法。
3. 公告内容由后端接口返回,字段可能为空。

【约束】
1. 不引入任何第三方依赖,样式用 scoped 或内联。
2. 弹窗不得遮挡页面主要操作按钮,出现位置在底部。
3. 关闭按钮必须可键盘操作,支持 Esc。

【输出】
1. 给一个单文件组件,含模板、脚本、样式三部分。
2. 给一份 20 行的示例 HTML,直接打开能看到弹窗。
3. 给一份字段说明,标明哪些可空与默认值。

【校验】
1. 在 320、768、1440 三个宽度下各看一次,不出现横向滚动。
2. 接口字段全空时不得报错,展示兜底文案。
3. 关闭后再刷新页面,当天不再出现,第七天重新出现。
复制后直接粘贴到模型使用
标签 前端Vue3代码生成组件开发