传送

你是视觉学习者吗？
通过我们深入的屏幕录制掌握 Livewire
立即观看

Livewire 允许你将模板的一部分传送到页面中 DOM 的另一部分。

这对于嵌套对话框之类的功能很有用。在另一个对话框中嵌套一个对话框时，父模态的 z 索引将应用于嵌套模态。这会导致背景和叠加样式出现问题。为了避免这个问题，你可以使用 Livewire 的 @teleport 指令将每个嵌套模态渲染为已渲染 DOM 中的同级元素。

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

基本用法

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

下面是一个使用 @teleport 渲染模态对话框内容的示例，该内容位于页面上 <body> 元素的末尾

<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>

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

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

现在，当上述 Livewire 模板在页面上呈现时，模态的内容部分将在 <body> 的末尾呈现

<body>
    <!-- ... -->
 
    <div x-show="open">
        Modal contents...
    </div>
</body>
您必须在组件外部传送

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

传送仅适用于单个根元素

确保在 @teleport 语句中仅包含一个根元素。