VUE2模拟VUE3中的Teleport实现改变元素挂载的节点

Teleport页面

<template>
   <div>
        <slot></slot>
    </div>
</template>

<script>
export default {
  name: 'teleport',
  props: {
    to: {
      type: String,
      required: true
    }
  },
  mounted() {
    const toEl = document.querySelector(this.to)
    if (toEl) {
      toEl.appendChild(this.$el)
    }
  },
  destroyed() {
    const toEl = document.querySelector(this.to)
    if (toEl) {
      toEl.removeChild(this.$el)
    }
  }
}
</script>

<style>
</style>

使用：

<!-- 日历组件 -->
    <teleport to="#app">
      <van-calendar
      class="colorBlack"
      :title="$t('pages.search.chooseDate')"
      v-model="dateStadus"
      :type="dateType"
      :allow-same-day="true"
      :min-date="minDate"
      :max-date="maxDate"
      :default-date="defaultDate"
      :formatter="formatter"
      @confirm="dateConfirm"
      :show-confirm="false"
      :show-mark="false"
      :show-subtitle="false"
      style="height: 520px;"
    />
    </teleport>
    // #app为最外层的元素id