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属性,可以将代码写成这样
大家还可以扫描二维码,关注我的微信公众号,蜗牛全栈。
文章图片
推荐阅读
- 热闹中的孤独
- JS中的各种宽高度定义及其应用
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷(Invasion篇)发售
- Android中的AES加密-下
- 放下心中的偶像包袱吧
- C语言字符函数中的isalnum()和iscntrl()你都知道吗
- C语言浮点函数中的modf和fmod详解
- C语言中的时间函数clock()和time()你都了解吗
- 如何在Mac中的文件选择框中打开系统隐藏文件夹