当前位置：首页 > VUE

vue实现portal

2026-03-27 17:03:55VUE

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">
      模态框内容
      <button @click="showModal = false">关闭</button>
    </div>
  </Teleport>
</template>

<script setup>
import { ref } from 'vue'
const showModal = ref(false)
</script>

to 属性指定目标 DOM 的选择器，可以是 body、#some-id 或 .some-class。

使用 Vue 2 的第三方库

Vue 2 可以通过以下库实现类似功能：

vue实现portal

portal-vue
安装：

npm install portal-vue

使用示例：

vue实现portal

<template>
  <button @click="show = true">打开 Portal</button>
  <Portal to="destination">
    <div v-if="show">内容将被传送到目标位置</div>
  </Portal>
  <PortalTarget name="destination" />
</template>

<script>
import { Portal, PortalTarget } from 'portal-vue'
export default {
  components: { Portal, PortalTarget },
  data() {
    return { show: false }
  }
}
</script>

vue-portal
安装：

npm install vue-portal

使用示例：

<template>
  <button @click="show = true">打开 Portal</button>
  <portal to="body">
    <div v-if="show">内容将被传送到 body</div>
  </portal>
</template>

<script>
import Portal from 'vue-portal'
export default {
  directives: { Portal },
  data() {
    return { show: false }
  }
}
</script>

手动实现 Portal

如果需要手动实现，可以通过动态创建 DOM 节点的方式：

<template>
  <button @click="showPortal">手动打开 Portal</button>
</template>

<script>
export default {
  methods: {
    showPortal() {
      const div = document.createElement('div')
      div.innerHTML = '<div class="portal-content">手动 Portal 内容</div>'
      document.body.appendChild(div)
    }
  }
}
</script>