portal-vue 在Vue中的使用

引文

使用过React的同学可能知道,在目前React的版本中可以找到一个叫Portals的相关API.
那么这Portals是用来干什么的? 下面看一下它的使用说明

Portals 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式。

第一个参数(child)是任何可渲染的 React 子元素,例如一个元素,字符串或碎片。第二个参数(container)则是一个 DOM 元素。

React中的用法

通常讲,当你从组件的 render 方法返回一个元素,该元素仅能装配 DOM 节点中离其最近的父元素:

然而,有时候将其插入到 DOM 节点的不同位置也是有用的:

对于 portal 的一个典型用例是当父组件有 overflow: hiddenz-index 样式,但你需要子组件能够在视觉上“跳出(break out)”其容器。例如,对话框、hovercards以及提示框:

注意:
记住这点非常重要,当在使用 portals时,你需要确保遵循合适的可访问性。

portal-vue 引入

在React中我们使用Portals来实现上文的需求,那么在Vue中如何实现上文的需求呢,经查验vue官网并没有提供portal相关的东西,于是便有了portal-vue这个库

portal-vue是什么?

简单来说PortalVue包含两个组件,portal组件和portal-target组件,他允许你将portal组件中的内容转至portal-target组件所在的地方.

更好的理解可以看官网的这句话
PortalVue is a set of two components that allow you to render a component's template (or a part of it) anywhere in the document - even outside the part controlled by your Vue App!

安装配置

portal-vue 这么用

下面简述几个例子

基本使用

在高级使用里面还可以进行配置以及与相关指令进行配合使用,其中动画、插槽也是可以根据需求来选择使用的.
portal-vue官网

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复