vue2 teleport

<template>
  <div>
    <button @click="showModal = true">Open Modal</button>

    <!-- 使用 Teleport 将模态框移动到 body 元素下 -->
    <teleport to="body">
      <div v-if="showModal" class="modal">
        <div class="modal-content">
          <span @click="showModal = false" class="close">&times;</span>
          <p>Some text in the Modal..</p>
        </div>
      </div>
    </teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  }
};
</script>

<style scoped>
/* 简单的样式，使模态框居中显示 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  position: relative;
}

.close {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
}
</style>

解释说明

• Teleport 组件：<teleport> 是 Vue 3 引入的一个功能组件，但在 Vue 2 中可以通过插件或自定义实现类似的功能。在上面的代码中，我们使用了 <teleport> 来将模态框的内容渲染到页面的 body 元素下，而不是默认的父组件内部。这有助于避免一些样式和布局问题，例如模态框被其他元素遮挡。

• 模态框逻辑：通过 v-if 控制模态框的显示与隐藏，点击按钮时会触发 showModal 的切换。

• 样式：简单的 CSS 样式使模态框居中显示，并添加了一个关闭按钮。

如果你需要在 Vue 2 中实现类似的功能，可以考虑使用第三方库如 vue-portal 或者自己编写类似的逻辑。