wot-design-uni/docs/component/root-portal.md
TAYUN 9132174b11
docs: ✏️ 修复基础组件文档问题 - 阶段一完成 (#1220)
* docs(button): 更新按钮组件文档对开放能力的描述

- 修改 session-message-title 和 session-message-path 属性名称
- 新增 chooseavatar 和 agreeprivacyauthorization 事件回调

* docs(icon): 更新图标组件文档

- 调整属性描述,明确 name 属性可用于图标名称或图片链接
- 添加事件列表,明确 click 事件的参数
- 移除英文示例代码中不必要的示例和图标列表
- 优化文档结构和格式,使信息更加清晰

* docs(config-provider): 更新全局配置组件文档

- 调整文档中的强调样式,使用加粗替代下划线
- 完善英文文档缺失的内容,保持和中文文档一致

* docs(component): 更新 Popup 组件文档

- 调整文档结构,优化标题层级
- 添加 v-model 使用示例,明确组件绑定值
- 移除冗余的代码示例,精简文档内容
- 更新属性表格,统一属性描述
- 添加防止滚动穿透的解决方案说明

* docs(resize):  ✏️ 更新 resize 组件文档

- 修正事件名称从 `size` 改为 `resize`
- 添加组件属性(Attributes)、事件(Events)和插槽(Slots)的详细说明
- 更新文档结构,使其更加完整和易于理解

* docs(transition): ✏️完善Transition 动画组件文档的属性和事件描述

- 增加自定义根节点样式类、懒渲染、动画结束后销毁子节点等属性
- 添加进入和离开过渡的开始、激活和结束状态类
- 新增点击事件和默认插槽
- 更新文档以反映新增功能

* docs(fab): ✏️更新fab组件文档

- 优化了文档结构,调整了部分格式
- 添加了 Methods 和 default Slot 相关的信息
- 更新了 custom-style 属性的命名

* docs(component): ✏️ 更新 Text 组件文档

- 优化文档格式,调整表格结构
- 添加缺失的参数说明和示例代码
- 更新参数类型和默认值
- 增加 call 参数说明
- 补充 Slots 表格

* docs(root-portal):  ✏️ 更新组件文档

- 添加 Attributes 和 Events 部分,说明该组件无相关配置
- 修正 Slots 部分的版本信息,统一为 1.11.0
- 更新中文和英文文档
2025-08-17 14:08:48 +08:00

1.6 KiB

version
version
1.11.0

Root Portal 根节点传送

是否从页面中脱离出来,用于解决各种 fixed 失效问题,主要用于制作弹窗、弹出层等。

:::tip 提示 根节点传送组件仅支持微信小程序支付宝小程序APPH5平台,组件会自动根据平台选择合适的实现方式:

  • H5 端:使用 teleport 特性
  • 微信小程序和支付宝小程序:使用 root-portal 组件
  • App 端:使用 renderjs 实现
  • 其他平台:不支持此功能

该功能主要用于解决复杂布局中弹窗的层级和定位问题,在需要时才建议使用。 :::

基本用法

使用 wd-root-portal 将内容渲染到根节点,避免被父组件的样式影响。

<wd-button type="primary" @click="show = true">显示弹窗</wd-button>
<wd-root-portal v-if="show">
  <view class="modal">
    <view class="modal-content">
      <text>这是一个全局弹窗</text>
      <wd-button @click="show = false">关闭</wd-button>
    </view>
  </view>
</wd-root-portal>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

Attributes

该组件无属性配置。

Events

该组件无事件。

Slots

名称 说明 最低版本
default 默认插槽,用于渲染传送内容 1.11.0