uni-app uni-popup组件需求 只能在当前元素下渲染

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app uni-popup组件需求 只能在当前元素下渲染

官方的uni-popup只能在当前元素下渲染经常遇到层级问题, 能否实现渲染到body下或者支持vue3的Teleport组件 (app端)

Harmonyos Next教程
4 回复

app上没有body，所以没办法这样。。你放到那个页面的template下的子节点就差不多了，你页面上的除了fixed和uni原生的基本上都不会盖住


我使用<root-portal>元素解决的
<root-portal> <uni-popup ref="selectImageDiaRef" :mask-click="true" backgroundColor="#ffffff" borderRadius="30rpx 30rpx 0 0" type="bottom">
</uni-popup>
</root-portal>

这个只有uniappx的微信小程序能用吧

在uni-app中，uni-popup组件默认是挂载在根节点下的，这意味着它会脱离当前组件的DOM树，显示在页面的最上层。然而，在某些特定需求下，你可能希望uni-popup组件只能在当前元素下渲染，即保持其层级在当前组件内部。虽然uni-app官方没有直接提供这样的功能，但我们可以通过一些技巧来实现类似的效果。

以下是一个利用CSS和JavaScript结合的方式，模拟在当前元素下渲染uni-popup的效果。这里我们不会直接修改uni-popup的挂载方式，而是通过覆盖和定位来实现视觉上的效果。

<template>
  <view class="container">
    <button @click="showPopup">显示Popup</button>
    <view class="popup-wrapper" v-if="isPopupVisible">
      <uni-popup ref="myPopup" type="bottom" :show="isPopupVisible">
        <view class="popup-content">
          这是自定义的Popup内容
          <button @click="hidePopup">关闭</button>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isPopupVisible: false
    };
  },
  methods: {
    showPopup() {
      this.isPopupVisible = true;
      this.$nextTick(() => {
        const popupWrapper = this.$el.querySelector('.popup-wrapper');
        const popupElement = this.$refs.myPopup.$el.querySelector('.uni-popup__content');
        popupElement.style.position = 'static'; // 取消默认定位
        popupWrapper.appendChild(popupElement.parentNode); // 将Popup内容移动到wrapper内
      });
    },
    hidePopup() {
      this.isPopupVisible = false;
      // 重置Popup的定位和内容（如果需要的话）
      this.$nextTick(() => {
        const popupContent = this.$refs.myPopup.$el.querySelector('.uni-popup__content');
        if (popupContent.parentNode.classList.contains('popup-wrapper')) {
          popupContent.parentNode.removeChild(popupContent.parentNode); // 还原到原始位置
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  position: relative;
}
.popup-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000; /* 确保Popup在最上层 */
  pointer-events: none; /* 防止点击穿透 */
}
.popup-content {
  pointer-events: auto; /* 恢复点击事件 */
}
</style>

注意：这种方法并不是官方推荐的做法，且可能存在兼容性和性能问题。在实际项目中，建议根据具体需求和场景选择合适的解决方案。如果确实需要在当前元素下渲染组件，可以考虑使用其他UI框架或自定义组件来实现。

回到顶部