portal

《 Portal》通过传送门原理设计谜题 #生活乐趣# #游戏乐趣# #解谜游戏#

引文

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

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

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

React中的用法

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

render() { // React mounts a new div and renders the children into it return ( <div> {this.props.children} </div> ); } 12345678

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

render() { // React does *not* create a new div. It renders the children into `domNode`. // `domNode` is any valid DOM node, regardless of its location in the DOM. return ReactDOM.createPortal( this.props.children, domNode, ); } 12345678

对于 portal 的一个典型用例是当父组件有 overflow: hidden 或 z-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!

安装配置

npm install --save portal-vue # or with yarn yarn add portal-vue 1234

import PortalVue from 'portal-vue' Vue.use(PortalVue) 123 portal-vue 这么用

下面简述几个例子

基本使用

<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 anwhere in your App. The slot content of the above portal component will be rendered here. --> </portal-target> 123456789101112

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

网址：portal https://www.yuejiaxmz.com/news/view/523347

相关内容

华为认证 HCIA
蓝鲸生活app
XXClean0.1.9
DIY旧物改造 打造...
网络课程学习平台入口
优化区域延迟
手工DIY装饰品 织法教程
每日科普问答 在日常生活中应该注意哪些方面来改善我们的睡眠呢？
平面方案优化
商业展厅

随便看看