Vue3 使用 Teleport 封装一个 Dialog

作者：程序员海军

2023-04-18
上海
本文字数：1015 字
阅读完需：约 3 分钟

什么是 Teleport ？

:::info 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

简单的说，Teleport 可以把模板代码传送到其它组件中，:::

用法：

1. 通过 to 指定传送的位置

接收一个 to prop 来指定传送的目标。to 的值可以是：
css 选择器字符串
DOM 元素对象

 <teleport to='body'>    //传送到 body 元素下，显示模板内容</teleport>


 <teleport to='.main'>    //传送到 class为 main 元素下，显示模板内容</teleport>

 <teleport to='#content'>    //传送到 id 为 content 元素下，显示模板内容</teleport>

复制代码

2. 禁用 teleport

在某些场景下可能需要视情况禁用。举例来说，我们想要在桌面端将一个组件当做浮层来渲染，但在移动端则当作行内组件。我们可以通过对动态地传入一个 disabled prop 来处理这两种不同情况。

<Teleport :disabled="isMobile">  ...</Teleport>

复制代码

3. 共享一个 Teleport

当多个 Teleport 的 to 值都指向一个 css 选择器字符串或者元素标签时，且 Teleport 为显示状态时，多个 Teleport 的内容会显示在一块。

<Modal  v-model:dialog-status="showStatus" title="登录" v-if="showStatus" @close="showTeleport">  <h2>我是自定义的内容</h2>  <hr>  <h3>v-model 学习</h3></Modal>

<teleport to='body' >  <h1 v-if="showStatus" >👌 共享 teleport </h1></teleport>

复制代码

上面我们给 body 元素添加了两个目标，显示状态时，都会显示出来。Modal 是封装好的 Teleport。

封装一个 Dialog

 <template>    <teleport to='body' :disabled="true">            <div class="modal-mask" v-show="dialogStatus">                <div class="modal-wrapper">                    <div class="main">                        <div class="operate">                            <span @click="close">❌</span>                        </div>                        <div class="title">                            {{title}}                        </div>                        <div class="content">                            <slot></slot>                            <slot name="test"></slot>                        </div>                    </div>                </div>                </div>    </teleport></template>