Svelte-Portal 使用教程

Svelte-Portal 使用教程

svelte-portal Svelte component for rendering outside the DOM of parent component 项目地址: https://gitcode.com/gh_mirrors/sv/svelte-portal

1. 项目介绍

Svelte-Portal 是一个基于 Svelte 的组件，它允许开发者将组件渲染到父组件之外的 DOM 中。这种功能在某些场景下非常有用，例如模态框、浮层提示等，可以避免因嵌套层级较深导致的样式污染问题。

2. 项目快速启动

首先，确保你的开发环境中已经安装了 Node.js 和 npm。

安装

通过 npm 安装 Svelte-Portal：

npm install --save svelte-portal

或者使用 yarn：

yarn add svelte-portal

使用 Portal 组件

在 Svelte 组件中，你可以直接使用 <Portal> 组件来指定元素渲染的位置：

<script>
import Portal from 'svelte-portal';
</script>

<Portal target="body">
  <div class="toast">Entity successfully updated!</div>
</Portal>

在上面的例子中，target 属性可以是一个 DOM 元素（例如 document.body）或者一个 CSS 选择器（例如 #modals），它指定了子组件将被渲染到哪个元素中。如果没有提供 target，默认会使用 document.body。

使用 Portal 动作

你也可以通过 Svelte 的动作（action）功能，直接将 portal 的功能应用到 DOM 元素上：

<script>
import { portal } from 'svelte-portal';
</script>

<div class="toast" use:portal="{ target: 'body' }" hidden>
  Entity successfully updated!
</div>

这里，hidden 属性是必要的，当元素被 portal 移动到目标位置后，该属性会被移除。

TypeScript 支持

如果你使用 TypeScript，需要从 svelte-portal/src/Portal.svelte 而不是 svelte-portal 导入 Portal 组件，以获得类型支持。

3. 应用案例和最佳实践

• 模态框：使用 Svelte-Portal 将模态框渲染到页面的最顶层，确保模态框能够覆盖所有其他内容。
• 全局提示：将提示信息渲染到页面的特定区域，而不会受到组件嵌套层级的影响。
• 组件解耦：将某些组件从父组件的 DOM 结构中独立出来，减少样式和逻辑的耦合。

4. 典型生态项目

Svelte-Portal 可以与 Svelte 的其他生态系统项目配合使用，例如：

• Svelte-routing：用于页面路由管理，与 Svelte-Portal 结合可以轻松实现路由级别的模态框。
• Svelte-material-ui：一套基于 Svelte 的 Material Design UI 库，可以与 Svelte-Portal 一起使用，实现复杂 UI 结构的解耦。

svelte-portal Svelte component for rendering outside the DOM of parent component 项目地址: https://gitcode.com/gh_mirrors/sv/svelte-portal