【Vant组件】van-dialog组件弹窗只有遮罩层不显示内容解决方案

项目场景：

移动端引用Vant组件Popup 弹出层 van-dialog，只显示遮罩层而不显示内容。

---

问题描述

移动端引用van-dialog 组件做弹出层显示内容，只显示遮罩层而不显示内容。

vue中代码如下

    <van-dialog v-model="popShow" :title="showTextTitle"
                confirm-button-color="#1e87f0"
                confirmButtonText="确定"
                @confirm="Confirm"
                @cancel="Cancel" show-cancel-button>
      <div style="height: 100%;max-height:500px;overflow: scroll">
       内容111
      </div>
    </van-dialog>

---

原因分析：

未指定挂载位置可能导致内容不显示

由于未指定组件 van-dialog 出现位置导致内容不显示。

---

解决方案：

指定弹出层挂载位置：弹出层默认挂载到组件所在位置，可以通过 get-container 属性指定挂载位置。

<!-- 挂载到 body 节点下 -->
<van-popup v-model="show" get-container="body" />

<!-- 挂载到 #app 节点下 -->
<van-popup v-model="show" get-container="#app" />

<!-- 通过函数指定挂载位置 -->
<van-popup v-model="show" :get-container="getContainer" />
export default {
  methods: {
    // 返回一个特定的 DOM 节点，作为挂载的父节点
    getContainer() {
      return document.querySelector('.my-container');
    },
  },
};

添加 get-container="body" 最后代码如下：

    <van-dialog v-model="popShow" :title="showTextTitle"
                get-container="body"
                confirm-button-color="#1e87f0"
                confirmButtonText="确定"
                @confirm="Confirm"
                @cancel="Cancel" show-cancel-button>
      <div style="height: 100%;max-height:500px;overflow: scroll">
       内容111
      </div>
    </van-dialog>