欢迎光临
我的个人博客网站

vue3.0 传送门teleport

我们先看一段代码,功能很简单,模板里有一个按钮,点击按钮,展示一个模态窗口。

const app = Vue.createApp({   data() {     return {       show: false,     };   },   methods: {     handleShowModal() {       this.show = true;     },   },   template: `     <div class="box" id="box">       <button @click="handleShowModal">显示模态窗口</button>       <div class="modal" v-if="show">模态窗口</div>     </div>   ` } 

模态窗口样式如下:

.box {   position: absolute;   width: 100px;   height: 100px;   background-color: cadetblue; } .modal {   position: absolute;   top: 0;   bottom: 0;   left: 0;   right: 0;   background: rgba(0, 0, 0, 0.5); } 

整个模态窗口呈绝对定位,left、right、top、bottom 全部给0,背景色为黑色半透明。我们期望的效果,应该点击按钮,模态窗口覆盖整个页面。

现在我们来运行下,我们会发现,其实模态窗口只覆盖了 #box 元素,因为 #box 本身就是绝对定位, 模态窗口元素是他的子节点,所以模态窗口只覆盖了 #box 元素。

如果在没有学习 teleport 之前,我们会在根节点定义一个模态窗口,在业务组件里去做调用。但是这样的话,组件与模态窗口的逻辑就会产生割裂感。那有没有什么方法,可以让我模态窗口就写在这个组件内,但真正呈现在页面时,可以动态插入到 元素上的,其实是有的,我们只要简单的修改下 template模板,就可以实现这个要求了。

template: `     <div class="box">         <button @click="handleShowModal">显示模态窗口</button>         <teleport to="body">             <div class="modal">模态窗口</div>         </teleport>             </div> ` 

我们用 teleport 元素将 modal 包裹起来,并定义属性 to="body" ,运行页面,我们查看 dom 节点,就会发现 modal 元素已经追加到 body 底部了,效果如下。

--body   --#root vue根节点   --.modal 模态窗口 

传送到其他位置

如果我们想将 modal 节点传送到其他位置,也可以这么做。

<teleport to="#app">     <div class="modal">模态窗口</div> </teleport>     

这段代码就是将 modal 元素追加到 id=app 的元素内,有一点需要注意,我一直说的是追加元素,假如说,原来 #app 内部已经存在其他节点,那么 modal 元素将追加到这些节点之后,有兴趣可以自己试一下。

与组件一起使用

其实使用在组件上和普通的 dom 元素并没有什么区别,组件中的节点将被渲染到指定的dom节点中(body或者指定ID)

const app = Vue.createApp({   ...   template: `     <div class="box" id="box">       <button @click="handleShowModal">显示模态窗口</button>       <teleport to="body">          <child-component :name="name"/>        </teleport>     </div>   ` } app.component('child-component',{     props:['name']     template: `<div class='modal'>{{name}}</div>` }) 

即使被渲染到不同的节点,它仍和普通子组件一样,接收父组件传输的数据,并没有因为渲染节点改变而改变。

对同一目标使用多个 teleport

<teleport to="#modals">   <div>A</div> </teleport> <teleport to="#modals">   <div>B</div> </teleport> 

结果如下:

-- #modal     -- A     -- B 

所以上面我一直强调,使用 teleport 是将包裹元素追加到指定节点,所以上面两个 teleport 将依次追加到 #modal 上。

总结

teleport多应用于逻辑属于该组件,而从技术角度讲,却要把它移动到其他节点(body或者指定ID的元素) 里。最常见的场景就是创建一个包含全屏模式的组件,逻辑存在于组件内,但是基于css样式,却要把他移动到 body 元素上。

赞(0) 打赏
未经允许不得转载:张拓的天空 » vue3.0 传送门teleport
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏