本文档最新版为 2.x,旧版本可能放弃维护,推荐阅读最新版!

Livewire allows you to teleport part of your template to another part of the DOM on the page entirely.

This is useful for things like nested dialogs. When nesting one dialog inside of another, the z-index of the parent modal is applied to the nested modal. This can cause problems with styling backdrops and overlays. To avoid this problem, you can use Livewire’s @teleport directive to render each nested modal as siblings in the rendered DOM.

This functionality is powered by Alpine’s x-teleport directive.

Basic usage

To teleport a portion of your template to another part of the DOM, you can wrap it in Livewire’s @teleport directive.

Below is an example of using @teleport to render a modal dialog’s contents at the end of the <body> element on the page:

    <!-- Modal -->
    <div x-data="{ open: false }">
        <button @click="open = ! open">Toggle Modal</button>

            <div x-show="open">
                Modal contents...

The @teleport selector can be any string you would normally pass into something like document.querySelector().

You can learn more about document.querySelector() by consulting its MDN documentation.

Now, when the above Livewire template is rendered on the page, the contents portion of the modal will be rendered at the end of <body>:

    <!-- ... -->

    <div x-show="open">
        Modal contents...

[!warning] You must teleport outside the component
Livewire only supports teleporting HTML outside your components. For example, teleporting a modal to the <body> tag is fine, but teleporting it to another element within your component will not work.

本文章首发在 网站上。

上一篇 下一篇
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 0
发起讨论 只看当前版本