Vue的teleport真的很有用!
发布时间:2021年11月28日 18:04:37
发布人:jqh?
今天把相册功能由原来的展示固定目录的照片改成了依托于分区详情页面(category_detail)而实现可以进行分区的相册。在这个过程中遇到了一个问题。分区详情页面采用了vant的标签页组件,然后这个组件会给整个内容区域外面的div加上transform属性,从而实现标签页的切换。然后,照片点是可以查看大图的,这个大图是position:fixed样式的,占满整个屏幕。但是,transform属性会影响position:fixed的位置,使其不再是根据浏览器窗口绝对定位,而是根据有transform属性的父元素定位。
一开始我想的是在打开大图的时候临时取消transform样式,然后关闭的时候再改回来。但是这种hack操作在使用封装好的外部组件的情况下就很麻烦很麻烦。因为不知道那个transform样式是什么时候赋值上去的,所以总是改不过来,要不就是改过来了,主页面也乱了。
最后!!我想起来了Vue还有一个teleport功能,可以把组件内的一个元素直接传送出去。所以我直接把大图给传送给body,就完事了!!啊!!Vue太神奇了!!
teleport官方文档:[Teleport | Vue.js](https://v3.cn.vuejs.org/guide/teleport.html)
热门评论: