Vue3中的Teleport(传送门)

动画片多啦A梦相信大家很多都看过,而且近几年又出现了相关的电影,作为小编一个男生来说,一直是对里面的静香念念不忘,有点跑偏了哈,今天小编介绍的Teleport就和多啦A梦的任意门一样,可以穿梭到任何的DOM中的任何地方
模态框一直是实际开发中用到比较多的功能之一,在没有各种各样的组件之前,我们需要通过css中的定位对元素进行修饰,有了Teleport,我们就可以这样实现一个简单的模态的组件

.area{ position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); /**/ width: 200px; height: 300px; background:green; } .mask{ position: absolute; left:0; right:0; top:0; bottom:0; background: #000; opacity: 0.5; }

【Vue3中的Teleport(传送门)】上面的例子是将元素传递到body中,如果要将元素传递到指定的DOM节点,我们要怎么处理呢?
我们通过Teleport中的to属性,可以将代码写成这样

大家还可以扫描二维码,关注我的微信公众号,蜗牛全栈。
Vue3中的Teleport(传送门)
文章图片

    推荐阅读