在 Discourse 中使用 DModal API 渲染模态窗口（即弹出窗口/对话框）

[Discourse]

Discourse 3.1.0.beta6 发布了一个全新的基于组件的 <DModal> API。

此 API 已取代旧的基于控制器的 API，后者现已弃用。如果您有使用旧 API 的现有模态框，请查看此处的迁移指南。

渲染模态框

模态框通过在 Handlebars 模板中包含 <DModal> 组件来渲染。如果您还没有合适的模板，请查看 https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727。

一个简单的模态框示例如下：

<DButton
  @translatedLabel="显示模态框"
  @action={{fn (mut this.modalIsVisible) true}}
/>

{{#if this.modalIsVisible}}
  <DModal @title="我的模态框" @closeModal={{fn (mut this.modalIsVisible) false}}>
    你好世界，这是模态框中的一些内容
  </DModal>
{{/if}}

这里使用了 mut 辅助函数，这是仅在 hbs 中设置值的一种方式。您也可以使用任何其他标准的 Ember 方法来设置 modalIsVisible。

此示例将创建一个简单的模态框，如下所示：

封装为组件

在引入更多复杂性之前，通常最好将新的模态框封装到其自己的组件定义中。让我们将 <DModal> 相关内容移动到一个新的 <MyModal /> 组件中：

// components/my-modal.gjs
<template>
  <DModal @title="我的模态框" @closeModal={{@closeModal}}>
    你好世界，这是模态框中的一些内容
  </DModal>
</template>

将此 .gjs 文件升级为基于类的组件，将允许您引入更复杂的逻辑和状态。

要使用新组件，请更新调用站点以引用它，并确保传入 @closeModal 参数。

<DButton
  @translatedLabel="显示模态框"
  @action={{fn (mut this.modalIsVisible) true}}
/>

{{#if this.modalIsVisible}}
  <MyModal @closeModal={{fn (mut this.modalIsVisible) false}} />
{{/if}}

添加页脚

许多模态框都有某种号召性操作。在 Discourse 中，这些通常位于模态框的底部。为此，DModal 提供了一些“命名块”，可以在其中渲染内容。以下是更新后的示例，在页脚中包含两个按钮，其中一个是标准的 DModalCancel 按钮：

<DModal @title="我的模态框" @closeModal={{@closeModal}}>
  <:body>
    你好世界，这是模态框中的一些内容
  </:body>
  <:footer>
    <DButton class="btn-primary" @translatedLabel="提交" />
    <DModalCancel @close={{@closeModal}} />
  </:footer>
</DModal>

从非 hbs 上下文中渲染模态框

理想情况下，<DModal> 实例应使用上述声明式技术在 Ember 模板中渲染。如果您的用例无法实现这一点，可以通过注入 modal 服务并调用 modal.show() 来完成。

请确保已按照上述说明将模态框封装到其自己的组件中。然后，通过传递组件类的引用来触发模态框：

import MyModal from "discourse/components/my-modal";

// （在相关位置注入 modal 服务）

// 每当您想打开模态框时，添加此调用。
// `@closeModal` 参数将自动传递给您的组件。
this.modal.show(MyModal);

// 可选地，传递一个 `model` 参数。作为 `@model` 传递给您的组件。
// 这可以包括数据，以及供您的模态框使用的操作/回调。
this.modal.show(MyModal, {
  model: { topic: this.topic, someAction: this.someAction },
});

// `modal.show()` 返回一个 Promise，因此您可以等待它关闭
// 它将解析为传递给 `@closeModal` 操作的数据
const result = await this.modal.show(MyModal);

更多自定义选项！

<DModal> 具有多个命名块和参数。查看交互式样式指南了解参数，以及d-modal 模板实现了解命名块。

---

本文档受版本控制 - 建议更改请在 GitHub 上进行。