vue3【详解】内置组件 Teleport

用于将组件内的部分模板，挂载到组件外的 DOM 上渲染

• 在 Vue Devtools 中，改变挂载位置的模板，仍然嵌套在父级组件下

• 同一节点被挂载多个 Teleport 时，后挂载的将排在目标元素下更后面的位置上。

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

  渲染结果

  <div id="modals">
    <div>A</div>
    <div>B</div>
  </div>
  

常用的属性

• to 指定挂载的目标，可以是一个 CSS 选择器字符串，也可以是一个 DOM 元素对象。

• disabled 用于禁用 Teleport

  <Teleport :disabled="isMobile">
    在桌面端将一个组件当做浮层来渲染，但在移动端则当作行内组件。
  </Teleport>
  

  这里的 isMobile 状态可以根据 CSS media query 的不同结果动态地更新。

【实战】全屏模态框

<button @click="open = true">Open Modal</button>

<Teleport to="body">
  <div v-if="open" class="modal">
    <p>Hello from the modal!</p>
    <button @click="open = false">Close</button>
  </div>
</Teleport>

.modal {
  position: fixed;
  z-index: 999;
  top: 20%;
  left: 50%;
  width: 300px;
  margin-left: -150px;
}

将模态框挂载到 body 标签上，避免挂载在其父组件内，会因嵌套层级太深，样式受到影响，如

• position: fixed 的祖先元素不能设置了 transform、perspective 或者 filter 样式
• z-index 受限于它的容器元素，嵌套太深，模态框容易被其他元素覆盖。

原文地址：https://blog.csdn.net/weixin_41192489/article/details/140609624

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！