安装

npm i @rtdui/dialogs

tip: 记得安装@rtdui/hooks和@rtdui/core配对依赖, 如果还未安装的话.

---

使用

使用命令方式打开对话框

首先, 要求在App顶层中添加Dialogs组件, 注意该组件必须有且只有一次. 通常作为React项目根组件的第一个孩子, 如:

import { Dialogs } from "@rtdui/dialogs";

<App>
  <Dialogs />
</App>;

之后就可以在App内的任意位置通过命令打开任意对话框:

import { dialogs } from "@rtdui/dialogs";

<button
  onClick={() =>
    dialogs.show({
      title: "Title",
      content: "Content", // 可以是任意React可以渲染的内容, 如React元素
      mode: "alert",
    });
  }
>Open</button>;

对话框模式

可以通过mode选项指定对话框类型, 支持:

• dialog 普通对话框, 这是默认模式. dialog模式同时支持全屏对话框.
• alert 用于替换原生的window.alert().
• prompt 用于替换原生的window.prompt().
• confirm 用于替换原生的window.confirm().

基本使用

本地化

可以对单个对话框的内建按钮的显示文本可以本地化.

• confirmLabel

  prompt和confirm对话框模式下的确认按钮的显示文本

• cancelLabel

  prompt和confirm对话框模式下的取消按钮的显示文本

• closeLabel

  alert对话框模式下的关闭按钮的显示文本

也可以在<Dialogs>中全局的本地化:

import { Dialogs } from "@rtdui/dialogs";

<App>
  <Dialogs
    dirtyWarningLabel="内容已修改，关闭会丢失未保存的数据，确定要关闭吗？"
    closeLabel="关闭"
    confirmLabel="确定"
    cancelLabel="取消"
  />
</App>;

脏数据检查

当对话框包含表单时, 可以按以下步骤进行脏数据检查. 以实现关闭前提醒用户:

1. 顶层对话框应提供dialogId字段, 以便在脏数据检查代码中可以直接关闭它. dialogId值会自动赋值给对话框的content组件的dialogId属性

2. 在对话框的content组件中实现自定义逻辑进行脏检查, 如果是脏的, 则调用dialogs.update()方法更新对话框为脏状态:

   dialogs.update({ dialogId, isDirty: true });

3. 脏数据提示文本本地化

   <Dialogs dirtyWarningLabel="内容已修改，关闭会丢失未保存的数据，确定要关闭吗？" />