# antdv-pro-modal

**Repository Path**: TsMask/antdv-pro-modal

## Basic Information

- **Project Name**: antdv-pro-modal
- **Description**: 【Vue3】Ant Design Vue Pro 模态对话框，可拖拽、可调整大小。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-05-29
- **Last Updated**: 2025-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Ant-Design, TypeScript

## README

# Ant Design Vue Pro Modal

Ant Design Vue Pro 模态对话框，可拖拽、可调整大小。

[![Vue Support](https://img.shields.io/badge/support-Vue3-green?style=flat)](./package.json)
[![NPM version](https://img.shields.io/npm/v/antdv-pro-modal/latest?style=flat)](https://www.npmjs.com/package/antdv-pro-modal)
[![NPM downloads](https://img.shields.io/npm/dm/antdv-pro-modal.svg?style=flat)](https://www.npmjs.com/package/antdv-pro-modal)
![License MIT](https://img.shields.io/badge/License-MIT-blue.svg)

## 安装 Install

```bash
npm i antdv-pro-modal
```

## 简单使用 Simple Usage

首先，您应该将所需的 `antdv-pro-modal` 添加到库中。

```js
// 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");
```

之后，您可以在Vue组件中使用模态框，如下所示：

```vue
<template>
  <a-card>
    <a-space>
      <a-button type="primary" @click="showModal"> 点击确定关闭 </a-button>
      <a-button type="primary" @click="handleModal">
        useModal组件方式
      </a-button>
    </a-space>
  </a-card>

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

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

const visible = ref<boolean>(false);

const showModal = () => {
  visible.value = !visible.value;
};

const modal = useModal();
const handleModal = () => {
  modal.open({
    drag: true,
    borderDraw: true,
    title: "Example Modal",
    content: "This is an example modal content",
    onOk: (e) => {
      console.log("Confirmed", e);
    },
    onCancel: (e) => {
      console.log("Cancelled", e);
    },
  });
};
</script>
```

## 库功能支持 API

### 组件模态框 ProModal

| 参数 | 说明 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| ...                | Modal属性                        | [Modal 对话框](https://www.antdv.com/components/modal-cn#API) | - |
| maskClosable       | 点击蒙层是否允许关闭               | boolean    | `false`   |
| title              | 标题                             | VNode\| slot    | -   |
| closeIcon          | 自定义关闭图标                    | VNode\| slot    | -   |
| okText             | 确认按钮文字                      | string\| slot    | 确定   |
| cancelText         | 取消按钮文字                      | string\| slot    | 取消   |
| footer             | 底部内容                          | VNode\| slot\| null\| false    | 确定取消按钮    |
| width              | 宽度，单位`px`                    | number      | `520`     |
| minWidth           | 最小宽度,仅`borderDraw`开启有效    | number      | `364` |
| minHeight          | 最小高度,仅`borderDraw`开启有效    | number      | `256` |
| borderDraw         | 边界拉伸                          | boolean    | `false`   |
| drag               | 按住标题拖动                      | boolean    | `false`   |
| centerY            | 打开始终水平居中,偏离顶部 `top:100px`位置      | boolean    | `false`   |
| fullscreen         | 是否显示右上角的全屏按钮           | boolean    | `false`   |
| forceFullscreen    | 强制全屏显示                      | boolean    | `false`   |
| @rect        | 当前模态框的尺寸信息事件               | function(e: [DOMRect](https://developer.mozilla.org/docs/Web/API/Element/getBoundingClientRect))    | -   |

### Hooks模态框 useModal

在页面内 `const { open, close } = useModal();` 实例化后调用函数

- `close()` 关闭函数
- `open(props)` 打开函数，参数支持如下：

| 参数 | 说明 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| ...                | ProModal属性                    | [ProModal 对话框](#组件模态框-promodal) | - |
| width              | 宽度，单位`px`                    | number      | `416`     |
| minWidth           | 最小宽度,仅`borderDraw`开启有效    | number      | `416` |
| minHeight          | 最小高度,仅`borderDraw`开启有效    | number      | `156` |
| icon               | 图标，渲染到标题左侧              | VNode \| ()=>VNode \ | -     |
| content            | 内容信息，渲染到默认插槽          | VNode \| ()=>VNode \| string | -     |

## 基本使用示例 Basic Usage

项目目录下 [演示测试](./playground/) or [项目引用示例](https://gitee.com/TsMask/mask_vue3_antd)

当前版本，还在持续更新 [v4](https://gitee.com/TsMask/antdv-pro-modal)

## 持续维护 Continuous Maintenance

```bash
# 安装所需依赖
npm install

# 打包生成dist目录含d.ts文件
npm run build
```