Livewire 中文文档

主题

Teleport ​

Livewire 允许你将模板的一部分完全_传送_到页面上 DOM 的另一部分。

这对于嵌套对话框之类的东西很有用。当在另一个对话框内嵌套一个对话框时，父模态框的 z-index 会应用于嵌套的模态框。这可能会导致背景和覆盖层的样式问题。为了避免这个问题，你可以使用 Livewire 的 @teleport 指令将每个嵌套的模态框作为兄弟元素渲染在渲染的 DOM 中。

此功能由 Alpine 的 x-teleport 指令提供支持。

基本用法 ​

要将模板的一部分_传送_到 DOM 的另一部分，你可以将其包装在 Livewire 的 @teleport 指令中。

以下是使用 @teleport 在页面上的 <body> 元素末尾渲染模态对话框内容的示例：

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

        @teleport('body')
            <div x-show="open">
                Modal contents...
            </div>
        @endteleport
    </div>
</div>

INFO

@@teleport 选择器可以是你通常会传递给类似 document.querySelector() 的任何字符串。

你可以通过查阅其 MDN 文档了解有关 document.querySelector() 的更多信息。

现在，当上面的 Livewire 模板在页面上渲染时，模态框的_内容_部分将在 <body> 的末尾渲染：

html
<body>
    <!-- ... -->

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

你必须传送到组件外部

Livewire 仅支持将 HTML 传送到组件外部。例如，将模态框传送到 <body> 标签是可以的，但将其传送到组件内的另一个元素将不起作用。

传送仅适用于单个根元素

确保你的 @@teleport 语句内只包含一个根元素。