Livewire 中文文档

主题

传送 ​

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

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

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

基本用法 ​

要将模板的一部分_传送_到 DOM 的另一个部分，你可以用 Livewire 的 @teleport 指令将其包裹起来。

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

blade
<div>
    <!-- 模态框 -->
    <div x-data="{ open: false }">
        <button @click="open = ! open">切换模态框</button>

        @teleport('body')
            <div x-show="open">
                模态框内容...
            </div>
        @endteleport
    </div>
</div>

INFO

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

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

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

html
<body>
    <!-- ... -->
    <div x-show="open">
        模态框内容...
    </div>
</body>

你必须传送到组件外部

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

传送只适用于单个根元素

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