Portal-Vue

外观

返回顶部
本页内容

Portal-Vue 入门

什么是 PortalVue？

PortalVue 是一个包含两个组件的集合，允许您将组件模板（或其一部分）渲染到文档中的任何位置，甚至超出 Vue App 控制的部分！

Vue 3 的 Teleport 呢？

问得好！对于大多数情况，您可能甚至不需要 portal-vue，因为新的 Teleport 组件比这个库做得更好（阅读：没有 注意事项）。

有关深入解释，请查看 这里

设置

安装包

bash
npm install --save portal-vue@next

# or with yarn
yarn add portal-vue@next

将其添加到您的应用程序中

js
import PortalVue from 'portal-vue'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.use(PortalVue)

app.mount('#app')

有关更详细的安装说明、其他选项和通过 CDN 安装，请参阅文档的 安装 部分。

浏览器支持

该项目是为现代 Javascript 构建的，因为 Vue 本身也针对现代浏览器。它支持所有也支持 ES 模块的浏览器，即：

  • Chrome >=61
  • Firefox >=60
  • Safari >=11
  • Edge >=16

如果您出于某些原因需要支持旧浏览器，请确保将 node_modules/portal-vue/dist 包含在您使用 babel 编译的文件列表中。

Vue CLI 为此提供了专门的选项，即 transpileDependencies

js
// vue.config.js
module.exports = {
  transpileDependencies: ['portal-vue']
}

使用

关于示例

以下示例包含实时演示。在查看它们时，请记住，出于演示目的，我们将内容在一个组件内移动，但在现实中，<portal-target> 可以放置在应用程序中的任何位置。

此外，示例代码使用单文件组件格式（“.vue” 文件）。如果您不熟悉此格式，请查看官方文档 这里。

基础

html
<portal to="destination">
  <p>This slot content will be rendered wherever the
    <portal-target> with name 'destination'
    is located.
  </p>
</portal>

<portal-target name="destination">
  <!--
  This component can be located anywhere in your App.
  The slot content of the above portal component will be rendered here.
  -->
</portal-target>

启用/禁用 Portal

html
<portal to="destination" :disabled="true">
  <p>
    This slot content will be rendered right here as long as the `disabled` prop
    evaluates to `true`,<br />
    and will be rendered at the defined destination as when it is set to `false`
    (which is the default).
  </p>
</portal>

使用 v-if 进行条件渲染

html
<portal to="destination" v-if="usePortal">
  <ul>
    <li>
      When 'usePortal' evaluates to 'true', the portal's slot content will be
      rendered at the destination.
    </li>
    <li>
      When it evaluates to 'false', the content will be removed from the
      destination
    </li>
  </ul>
</portal>

多个 Portal，一个目标

PortalTarget 组件有一个 multiple 模式，允许同时渲染来自多个 Portal 组件的内容。

可以通过 Portal 组件上的 order 属性来调整内容的渲染顺序。

html
<portal to="destination" :order="2">
  <p>some content</p>
</portal>
<portal to="destination" :order="1">
  <p>some other content</p>
</portal>

<div class="some-wrapper">
  <portal-target name="destination" multiple />
</div>

结果

html
<div class="some-wrapper">
  <p>some other content</p>
  <p>some content</p>
</div>

用例

定位模态框和覆盖层

在旧浏览器中，position: fixed 在具有该属性的元素嵌套在具有其他 position 值的节点树中时，效果不可靠。

但我们通常需要它以固定位置渲染模态框、对话框、通知、小吃栏和类似的 UI 元素。

此外，在尝试将元素彼此叠加渲染到 DOM 中的某个位置时，z-index 也会成为问题。

使用 PortalVue，您可以将模态框/覆盖层/下拉菜单组件渲染到 <portal-target>，您可以将其定位为页面 body 中的最后一个，从而使样式设置和定位更加轻松且不易出错。

现在，您可以使用 position: absolute 来定位您的组件。

html
<body>
  <div id="app" style="position: relative;">
    <div>
      <portal to="notification-outlet">
        <notification style="position: absolute; top: 20px; right: 20px;">
          This overlay can be positioned absolutely very easily.
        </notification>
      </portal>
    </div>
    <!-- rest of your app -->
  </div>

  <portal-target name="notification-outlet"></portal-target>
</body>

渲染动态小部件

如果您在网站上使用 Vue 来处理少量内容，但想要在页面另一端的某个位置渲染内容，PortalVue 可以帮您解决这个问题。

告诉我们您的用例！

我们相信您会发现除了我们提到的以外的其他用例。如果您有，请通过在 Github 上创建一个问题来告知我们，我们将将其包含在此处。