Vue自定义组件实现类似elementUI的append-to-body功能，将创建的元素插入、挂载到body上面（网页最外层），适用于父元素overflow: hidden、绝对定位fixed的场景

在Vue中，创建一个自定义组件以实现与elementUI的append-to-body功能类似的效果，你可以通过监听组件的mounted生命周期钩子，将生成的元素插入到body标签中。以下是一个简单的自定义组件示例：

<template>
  <div v-show="false">
    <!-- 这里的内容会被插入到body中 -->
    <slot></slot>
  </div>
</template>
 
<script>
export default {
  name: 'AppendToBody',
  mounted() {
    // 将内容插入到body
    document.body.appendChild(this.$el);
  },
  beforeDestroy() {
    // 清理工作，移除插入的元素
    document.body.removeChild(this.$el);
  }
}
</script>

使用这个自定义组件时，你只需要将需要append到body的内容放在<slot></slot>中即可。例如：

<template>
  <div>
    <append-to-body>
      <!-- 这里的内容将被插入到body -->
      <div class="my-append-content">Hello, I'm appended to body!</div>
    </append-to-body>
  </div>
</template>
 
<script>
import AppendToBody from './AppendToBody.vue';
 
export default {
  components: {
    AppendToBody
  }
}
</script>

在这个例子中，<div class="my-append-content">将被插入到body标签中。当AppendToBody组件被销毁时，它会自动从body中移除。