SuperAPI AI 工具集

inertia-modal-development

前端与建站

查看项目

更新于 10-15 23:33

技能介绍

用途:在 Laravel + Inertia.js 应用中,用 inertiaui/modal 把任意 Laravel 路由以 Modal 或 Slideover 形式打开,无需改动现有路由与控制器。适用于 React 和 Vue,支持嵌套模态、预取、本地模态、无头模式与 TypeScript。

主要能力:后端用 Inertia::modal() 替代 Inertia::render() 打开路由,可用 baseRoute() 启用 URL 变化与浏览器历史;前端提供 ModalLink、Modal、HeadlessModal、ModalRoot、useModal、useModalStack、visitModal 等组件与 API,并支持配置模态行为、预取、嵌套模态、模态间通信、重载与延迟属性、样式定制。

使用方式:应用入口需使用 renderApp(Vue 的 @inertiaui/modal-vue 或 React 的 @inertiaui/modal-react),或设置 ModalRoot/ModalStackProvider,否则模态无法工作。控制器示例:return Inertia::modal('EditUser', ['user' => $user]); 带基础路由:->baseRoute('users.index')。前端可用 <ModalLink href="/users/create">Create User</ModalLink> 或 <Modal> 组件;编程式调用 Vue 用 visitModal('/users/create'),React 用 useModalStack() 的 visitModal。配置通过 putConfig 设置 type、navigate、useNativeDialog、appElement 以及 modal/slideover 的 closeButton、closeOnClickOutside、maxWidth、position 等。

限制与注意:模态路由必须用 Inertia::modal(),不要用 Inertia::render();嵌套模态中提交表单应使用 Axios,避免用 Inertia router.post() 导致关闭整个模态栈;模态内使用 Deferred 与 WhenVisible 时应从模态包导入,而非 @inertiajs/vue3 或 @inertiajs/react;closeExplicitly 会覆盖 closeOnClickOutside。范围外:不含无模态的普通 Inertia 路由,也不支持非 Laravel 后端。