vant 弹出层中使用日历组件报错 Cannot use ‘in‘ operator to search for ‘scrollTop‘ in undefined

报错截图

组件代码

<template>
  <div>
    <van-button @click="popupShow = true" block type="primary">发起操作</van-button>
    <van-popup :style="{ width: '90%' }" v-model="popupShow">
      <van-button @click="dateShow = true" block type="info">弹出日期组件</van-button>
      <van-calendar get-container="body" v-model="dateShow" />
    </van-popup>
  </div>
</template>

<script>
import { Popup, Calendar, Button } from 'vant'
export default {
  components: {
    [Popup.name]: Popup,
    [Calendar.name]: Calendar,
    [Button.name]: Button,
  },
  data() {
    return {
      popupShow: false,
      dateShow: false,
    }
  },
}
</script>

以上代码在每次打开弹出层之后控制台就会报错 Cannot use 'in' operator to search for 'scrollTop' in undefined，经排查，问题出在日历组件上。

---

报错原因

这个报错通常是由于在弹出层组件中使用日历组件时，弹出层组件的内容在初始化时还未渲染完成，导致无法找到正确的容器而报错。具体来说，vant 的弹出层组件 <van-popup> 在初始化时可能还未完全显示，而日历组件 <van-calendar> 在初始化时就尝试在弹出层中渲染，此时弹出层的容器可能还未正确创建，导致无法找到正确的容器而报错。这种情况下，日历组件无法正确初始化和渲染，从而导致报错。

---

解决办法

将 van-calendar 组件 挪到 van-popup 的外层去，例如与 van-calendar 组件同级。

将 <van-calendar> 组件移动到 <van-popup> 外层后，<van-calendar> 组件会在页面初始化时就进行渲染，而不会等待弹出层显示时再渲染。这样可以避免弹出层显示时找不到正确容器而报错的情况。