mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
9132174b11
* 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 - 更新中文和英文文档
71 lines
1.6 KiB
Markdown
71 lines
1.6 KiB
Markdown
---
|
|
version: 1.11.0
|
|
---
|
|
# Root Portal 根节点传送
|
|
|
|
是否从页面中脱离出来，用于解决各种 fixed 失效问题，主要用于制作弹窗、弹出层等。
|
|
|
|
:::tip 提示
|
|
根节点传送组件仅支持`微信小程序`、`支付宝小程序`、`APP`和`H5`平台，组件会自动根据平台选择合适的实现方式：
|
|
|
|
- **H5 端**：使用 `teleport` 特性
|
|
- **微信小程序和支付宝小程序**：使用 `root-portal` 组件
|
|
- **App 端**：使用 renderjs 实现
|
|
- **其他平台**：不支持此功能
|
|
|
|
该功能主要用于解决复杂布局中弹窗的层级和定位问题，在需要时才建议使用。
|
|
:::
|
|
|
|
|
|
|
|
## 基本用法
|
|
|
|
使用 `wd-root-portal` 将内容渲染到根节点，避免被父组件的样式影响。
|
|
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
```scss
|
|
.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 | |