PHP 升级公告弹窗组件生成器
输入升级时间与影响范围 → 产出公告弹窗 Vue 组件与验收项
适用场景
- 升级公告弹窗
- 组件封装
- 兼容旧浏览器
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. 关闭后再刷新页面,当天不再出现,第七天重新出现。
复制后直接粘贴到模型使用