Ant Design Vue Pro Modal

Ant Design Vue Pro 模态对话框，可拖动、可调整大小，并支持与 Modal.method() 一致的函数式调用。

安装 Install

npm i antdv-pro-modal

简单使用 Simple Usage

首先引入 ant-design-vue 与 antdv-pro-modal 的样式：

// main.[js|ts]
import { createApp } from "vue";
import App from "./App.vue";

// 全局引入 "ant-design-vue"
import Antd from "ant-design-vue";
import "ant-design-vue/dist/reset.css";

// 引入 antdv-pro-modal 样式文件
import "antdv-pro-modal/dist/style.css";

const app = createApp(App);

app.use(Antd).mount("#app");

之后即可在组件中使用模态框：

<template>
  <a-space>
    <a-button type="primary" @click="open = true">打开对话框</a-button>
  </a-space>

  <ProModal
    v-model:open="open"
    title="Title"
    :mask-closable="false"
    :drag="true"
    :borderDraw="true"
    :fullscreen="true"
    :centered="true"
  >
    <div>
      ① 窗口可以拖动；<br />
      ② 窗口可以全屏、关闭；<br />
      ③ 窗口可以通过八个方向拉伸改变大小；<br />
      ④ 限制窗口最小宽度/高度。
    </div>
  </ProModal>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ProModal } from "antdv-pro-modal";

const open = ref<boolean>(false);
</script>

库功能支持 API

组件模态框 ProModal

| 参数 | 说明 | 类型 | 默认值 | | --------------- | -------------------------------------- | ------------------------------------------------------------- | ------- | | ... | 透传 antd Modal 属性 | Modal 对话框 | - | | maskClosable | 点击蒙层是否允许关闭 | boolean | false | | width | 宽度，单位 px | number | 520 | | minWidth | 最小宽度（仅 borderDraw 开启有效） | number | 364 | | minHeight | 最小高度（仅 borderDraw 开启有效） | number | 256 | | centerX | 打开端终水平居中，偏离顶部 top:100px | boolean | false | | centered | 每次打开都垂直 + 水平居中 | boolean | false | | drag | 按住标题拖动模态框 | boolean | false | | borderDraw | 边界拉伸（八方向调整大小） | boolean | false | | fullscreen | 是否显示右上角的全屏按钮 | boolean | false | | forceFullscreen | 强制全屏显示 | boolean | false |

事件 Events

| 事件名 | 说明 | 回调参数 | | ----------------- | --------------------------------------- | ------------------------------------------------------------------------------------------- | | update:open | open 变化，支持 v-model:open | (open: boolean) | | update:fullscreen | 全屏状态变化，支持 v-model:fullscreen | (fullscreen: boolean) | | rect | 拖动 / 拉伸 / 全屏后当前模态框尺寸信息 | (rect: DOMRect) |

关闭按钮 closable 关闭时，全屏按钮 fullscreen 会一并隐藏；mask 设为 false（无遮罩浮动窗口）时点击将穿透到背后页面，多窗口可叠加并各自操作。

函数式调用 Modal.method()

用法与 ant-design-vue 的 Modal.method() 一致，返回实例 { close, destroy, update }。支持两种调用方式：

• 命令式（全局直接调用）：ProModal.confirm / info / success / error / warning
• Hook（继承当前 ConfigProvider 上下文，推荐）：const [modal, contextHolder] = ProModal.useModal()

命令式 ProModal.xxx()

无需 contextHolder，全局直接调用：

import { ProModal } from "antdv-pro-modal";

const instance = ProModal.confirm({
  title: "确认删除？",
  content: "删除后将无法恢复，请谨慎操作。",
  okText: "删除",
  okType: "danger",
  drag: true,
  onOk: () => console.log("onOk"),
  onCancel: () => console.log("onCancel"),
});

// 动态更新
instance.update({ title: "新的标题", content: "新的内容" });
// 关闭（destroy 为 close 的别名）
instance.destroy();

Hook useModal()

useModal() 返回 [api, contextHolder]，需要在模板中渲染一次 contextHolder：

<template>
  <a-button @click="onConfirm">confirm()</a-button>
  <!-- 挂载点，必须渲染一次 -->
  <contextHolder />
</template>

<script setup lang="ts">
import { ProModal } from "antdv-pro-modal";

const [modal, contextHolder] = ProModal.useModal();

const onConfirm = () => {
  modal.confirm({
    title: "确认删除？",
    content: "删除后将无法恢复。",
    drag: true,
    onOk: () => console.log("onOk"),
    onCancel: () => console.log("onCancel"),
  });
};
</script>

ModalOptions

函数式调用参数继承自 ProModalProps，并额外支持：

| 参数 | 说明 | 类型 | 默认值 | | --------- | --------------------------------------- | -------------------------------- | ---------- | | ... | ProModal 属性 | ProModal | - | | icon | 标题左侧图标，传 false 可隐藏默认图标 | VNode | (() => VNode) | false | 按类型自动 | | content | 正文内容，渲染到默认插槽 | string | VNode | (() => VNode) | - | | width | 宽度，单位 px | number | 416 | | minWidth | 最小宽度 | number | 416 | | minHeight | 最小高度 | number | 156 |

confirm 类型显示「取消 + 确定」两个按钮；info / success / error / warning 仅显示单个「确定」按钮。onOk 返回 Promise 时按钮自动 loading，resolve 后自动关闭。

实例方法

| 方法 | 说明 | | -------------- | ------------------------------------ | | update(config) | 合并新配置，实时更新正在显示的对话框 | | close() | 关闭对话框（播放关闭动画后销毁） | | destroy() | close() 的别名 |

ProModal.destroyAll()

销毁所有通过命令式（ProModal.xxx()）打开的对话框：

import { ProModal } from "antdv-pro-modal";
ProModal.destroyAll();

基本使用示例 Basic Usage

项目目录中 演示测试 或 项目引用示例

持续维护 Continuous Maintenance

当前版本 Vue3 + [email protected] V4

# 安装所需依赖
npm install

# 打包生成dist目录及对应.d.ts文件
npm run build