演示

useMobileBackDialog

在移动端拦截返回手势:关闭打开的对话框,而不是离开页面。从 @quan-erp/shared-ui 导入。

签名

传入对话框的 open 与 onOpenChange。多对话框时可用可选 key。

  • open — 是否打开
  • onOpenChange — 与 Dialog 相同的回调
  • key? — 同页多个对话框时隔离
TSsignature
1function useMobileBackDialog(options: { 2 open: boolean; 3 onOpenChange: (open: boolean) => void; 4 key?: string; 5}): void;

用法

放在对话框 state 旁调用一次。桌面行为不变。

TSXdialog
1import { 2 Dialog, 3 DialogContent, 4 useMobileBackDialog, 5} from "@quan-erp/shared-ui"; 6import { useState } from "react"; 7 8export function EditBranchDialog() { 9 const [open, setOpen] = useState(false); 10 useMobileBackDialog({ open, onOpenChange: setOpen }); 11 12 return ( 13 <Dialog open={open} onOpenChange={setOpen}> 14 <DialogContent>{/* form */}</DialogContent> 15 </Dialog> 16 ); 17}

注意

  • 面向移动 WebView / Capacitor 返回键
  • 可与 Responsive Dialog 搭配