1.7 KiB

Raw Blame History

version
1.11.0

Root Portal

Whether to break out of the page, used to solve various fixed positioning issues, mainly used for making popups and overlays.

:::tip Tip The root portal component only supports WeChat Mini Program, Alipay Mini Program, APP and H5 platforms. The component automatically chooses the appropriate implementation based on the platform:

H5: Uses teleport feature
WeChat Mini Program and Alipay Mini Program: Uses root-portal component
App: Uses renderjs implementation
Other platforms: Not supported

This feature is mainly used to solve the hierarchy and positioning problems of popups in complex layouts, and is recommended only when needed. :::

Basic Usage

Use wd-root-portal to render content to the root node, avoiding style interference from parent components.

<wd-button type="primary" @click="show = true">Show Modal</wd-button>
<wd-root-portal v-if="show">
  <view class="modal">
    <view class="modal-content">
      <text>This is a global modal</text>
      <wd-button @click="show = false">Close</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

This component has no attribute configuration.

Events

This component has no events.

Slots

Name	Description	Version
default	Default slot for portal content	1.11.0

1.7 KiB Raw Blame History