Livewire 中文文档

主题

全部文档

@teleport ​

@teleport 指令将模板的一部分渲染到 DOM 中的其他位置，位于组件正常放置位置之外。

基本用法 ​

用 @teleport 包裹内容，并用 CSS 选择器指定渲染位置：

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

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

模态内容将渲染到 <body> 元素末尾：

html
<body>
    <!-- Page content... -->

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

INFO

任意有效的 CSS 选择器

@@teleport 的选择器可以是你传给 document.querySelector() 的任意字符串，例如 'body'、'#modal-root' 或 '.modal-container'。

为什么使用 teleport？ ​

传送适用于嵌套模态、下拉菜单和弹出层等场景，父级样式或 z-index 值可能会干扰正确渲染。

不使用传送时：

blade
<div style="z-index: 10;">
    <!-- Parent modal with z-index: 10 -->

    <div style="z-index: 20;">
        <!-- Child modal inherits parent's stacking context -->
        <!-- Backdrop may not cover parent modal properly -->
    </div>
</div>

使用传送时：

blade
<div style="z-index: 10;">
    <!-- Parent modal -->

    @teleport('body')
        <div style="z-index: 20;">
            <!-- Child modal rendered as sibling at body level -->
            <!-- Backdrop can cover everything properly -->
        </div>
    @endteleport
</div>

常见用例 ​

模态对话框：

blade
@teleport('body')
    <div class="fixed inset-0 bg-black/50" x-show="showModal">
        <div class="modal">
            <!-- Modal content... -->
        </div>
    </div>
@endteleport

下拉菜单：

blade
@teleport('body')
    <div class="absolute" x-show="open" style="top: {{ $top }}px; left: {{ $left }}px;">
        <!-- Dropdown items... -->
    </div>
@endteleport

Toast 通知：

blade
@teleport('#notifications-container')
    <div class="toast">
        {{ $message }}
    </div>
@endteleport

重要约束 ​

WARNING

必须传送到组件之外

Livewire 只支持把 HTML 传送到组件外部。传送到同一组件内的另一个元素将不起作用。

WARNING

必须只有一个根元素

@@teleport 语句内只能包含一个根元素。不支持多个根元素。

有效：

blade
@teleport('body')
    <div>
        <h2>Title</h2>
        <p>Content</p>
    </div>
@endteleport

无效：

blade
@teleport('body')
    <h2>Title</h2>
    <p>Content</p>
@endteleport

由 Alpine 提供支持 ​

该功能底层使用 Alpine 的 x-teleport 指令。

了解更多关于传送内容 →

参考 ​

blade
@teleport(string $selector)
    <!-- Content -->
@endteleport
参数类型默认值说明
$selectorstring必填指定内容渲染位置的 CSS 选择器（例如 'body'、'#modal-root'、'.container'）