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 |
|