项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。

反馈与浮层 ​

桌面浮层体系(Dialog 居中模态、Drawer 侧滑、Dropdown 菜单、Popconfirm 气泡)在移动端收束为两种形态:底部面板(动作选择、字段拾取,拇指可达)与全屏页(长表单、内容编辑)。hover 类气泡(Tooltip / Popconfirm / Dropdown)在触屏上没有触发条件,一律迁移。

底部动作面板 ​

「更多操作」是底部动作面板的典型场景:桌面端的 Dropdown 菜单或操作列按钮组,在移动端收敛为一个入口 + 面板内纵向动作列表。破坏性动作放最底部并用警示色,与普通动作隔开,最后是取消栏。

9:41
订单详情
报销单 CL-0908-01审批中
申请人
李工
金额
¥1,860

下方演示即 ActionSheet 组件:动作列表纵向排布、破坏性动作 着警示色排在最末、底部取消栏独立成组。实现口径:舞台内 :append-to-body="false"(并配 :lock-scroll="false" 防止锁文档页滚动), 真机页面保持默认 Teleport 即可。

全屏表单页 ​

字段数超过一屏的编辑场景(新建 / 复杂编辑)不用居中 Dialog——窄屏上既放不下也不便输入。用 Dialog fullscreen 让表单页占满整屏:头部标题 + 关闭,底部吸底操作,等价于推入一个新页面。

9:41
客户详情
上海云启科技有限公司A 级
行业
软件与信息服务
负责人
李工

全屏页内表单沿用 label-position="top",footer 双按钮等宽(取消 + 主操作),不要在 footer 塞第三个按钮。

危险操作确认 ​

Popconfirm 依赖 hover / popper 定位,触屏上改用小型居中 Dialog:文案一句话说清后果,主按钮用警示色,取消按钮平级。避免弹窗里再套弹窗。

9:41
订单详情
删除后单据进入回收站,30 天内可恢复

轻提示(Toast) ​

Message 在移动端承担 toast 职责:成功 / 失败等操作结果用轻提示反馈,出现位置建议在顶部安全区下方居中(不挡底部操作区)。本站演示中 toast 出现在文档视口顶部,真机形态以 H5 样板为准。时长 2–3 秒;需要用户确认的信息不要用 toast,改用对话框。

9:41
轻提示