Root Portal

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

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

Slots

Name	Description	Version
default	Default slot for portal content	-

Source Code

Documentation

• Component