vue实现portal

Vue 实现 Portal 的方法

Portal 是一种将子节点渲染到父组件 DOM 结构之外的解决方案，常用于模态框、下拉菜单等场景。Vue 可以通过多种方式实现 Portal 功能。

使用 Vue 3 的 Teleport 组件

Vue 3 内置了 Teleport 组件，专门用于实现 Portal 功能。

<template>
  <button @click="showModal = true">打开模态框</button>
  <Teleport to="body">
    <div v-if="showModal" class="modal">
      <p>这是一个模态框</p>
      <button @click="showModal = false">关闭</button>
    </div>
  </Teleport>
</template>

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

使用 Vue 2 的第三方库

对于 Vue 2 项目，可以使用 portal-vue 库实现类似功能。

安装 portal-vue：

npm install portal-vue

在 main.js 中注册：

import PortalVue from 'portal-vue'
Vue.use(PortalVue)

使用示例：

<template>
  <button @click="showModal = true">打开模态框</button>
  <portal to="body">
    <div v-if="showModal" class="modal">
      <p>这是一个模态框</p>
      <button @click="showModal = false">关闭</button>
    </div>
  </portal>
</template>

手动实现 Portal

如果需要手动实现 Portal 功能，可以创建一个高阶组件：

const Portal = {
  props: ['target'],
  render() {
    const target = document.querySelector(this.target)
    if (target) {
      return this.$slots.default[0]
    }
    return null
  },
  mounted() {
    const target = document.querySelector(this.target)
    if (target) {
      target.appendChild(this.$el)
    }
  },
  beforeDestroy() {
    const target = document.querySelector(this.target)
    if (target && this.$el.parentNode === target) {
      target.removeChild(this.$el)
    }
  }
}

使用方式：

<template>
  <button @click="showModal = true">打开模态框</button>
  <Portal target="body">
    <div v-if="showModal" class="modal">
      <p>这是一个模态框</p>
      <button @click="showModal = false">关闭</button>
    </div>
  </Portal>
</template>

样式处理注意事项

Portal 组件虽然渲染在目标位置，但样式仍然受组件样式作用域影响。需要确保样式正确应用到 Portal 内容：

/* 使用深度选择器 */
::v-deep .modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  z-index: 1000;
}

动画过渡处理

为 Portal 内容添加过渡动画时，需要特别注意组件卸载时的动画效果：

<Teleport to="body">
  <transition name="fade">
    <div v-if="showModal" class="modal">
      <p>这是一个有动画的模态框</p>
      <button @click="showModal = false">关闭</button>
    </div>
  </transition>
</Teleport>

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}