Livewire 中文文档

主题

全部文档

传送 ​

Livewire 允许你把模板的一部分 传送（teleport） 到页面 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() 的任意字符串。

关于 document.querySelector() 的更多信息，可参阅其 MDN 文档。

上述 Livewire 模板渲染到页面后，模态的 内容 部分会出现在 <body> 末尾：

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

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

WARNING

必须传送到组件之外

Livewire 只支持把 HTML 传送到组件外部。例如，把模态传送到 <body> 是可以的，但传送到组件内部的另一个元素则不行。

WARNING

传送内容只能有一个根元素

请确保 @@teleport 语句内部只有一个根元素。