---
name: deppon-pro-dialog
description: >-
    使用 @deppon/deppon-template 的 ProDialog 生成弹窗（基础、内置 ProForm、自定义 body 插槽）。
    在用户需要模态框、编辑弹窗、pro-dialog 时应用。
---

# deppon-pro-dialog：ProDialog（私有 npm）

## 依据来源（私有 npm）

-   **`deppon-npm-private-registry`**。
-   **`@deppon/deppon-template`**：`ProDialog`、`ProForm` — 插槽名（`#footer`、`#body-content` 等）以包内 `*.d.ts` 为准。
-   **`@deppon/deppon-ui`**。
-   **`deppon-npm-skills`**。不默认读取 `deppon-npm` 的 `site/`。

## 导入

```js
import { ProDialog, ProForm } from '@deppon/deppon-template';
import { ElButton, ... } from '@deppon/deppon-ui';
```

## 基础用法

-   `v-model` 绑定 `ref` 布尔值；`title`、`width`；可选 `draggable`。
-   可选 **`resizable`**：拖动四边或四角边框缩放弹窗（含上、左、左上角等）；可配 `resize-min-width`、`resize-min-height`、`resize-max-width`、`resize-max-height`（单位 px 或 %）。
-   底部按钮放在 `<template #footer>`。

## 表单弹窗（常见模式）

-   `pro-dialog` 包一层 `pro-form`：`ref`、` :columns`、` :initial-values`、` :rules`、` :label-width`、` :cols`（弹窗内常用 `cols=1`）。
-   `:close-on-click-modal="false"` 防误触。
-   `@closed` 里重置表单或清空 `initial-values`。
-   确定：`handleFormSubmit(dialogFormRef)` 内通过 `dialogFormRef.value` 调用 **`ProForm` 实例** 的校验/取值方法（方法名以类型定义为准）。

## 自定义内容

-   使用 `<template #body-content>` 包裹复杂布局（非默认 slot 时）。

## 组合建议

-   列表页的「新建/编辑」可：父级只切换 `visible` + 传入 `initial-values`；columns 定义见 `deppon-pro-form` skill。