而不用特意的把一些DOM结构给分离出去,然而,在同一组件中,触发模态框的按钮和模态框本身在同一组件中
因为他们都与组件的开关状态有相关联,模态框与按钮一起渲染在应用DOM结构很深的地方,会导致模态框的...css布局位置非常难控制
鉴于这样的场景和困难,Vue官方提供了一个Teleport组件,很好的可以解决这个问题,让开发者不需要顾虑DOM结构的问题
01
组件套组件层次结构很深时
比如:现在有两个组件...,里面存在着控制弹框的显示和隐藏的逻辑,当嵌套的组件比较深,复杂时
如果父级元素存在定位,那在控制子元素的位置时,用css的transform或者position:absolute,参照对象的变更,会破坏布局结构...body,或id,class">
里面是Html结构模板内容
注意
挂载时,传送的 to 目标必须已经存在于 DOM 中。...
这里的 isMobile 状态可以根据 CSS media query 的不同结果动态地更新
05
多个 Teleport 共享目标时
一个可重用的模态框组件可能同时存在多个实例