Ant Design Vue Pro Modal

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

安装 Install

npm i antdv-pro-modal

简单使用 Simple Usage

首先，您应该将所需的 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");

之后，您可以在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 对话框 | - | | 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) | - |

Hooks模态框 useModal

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

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

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

基本使用示例 Basic Usage

项目目录下 演示测试 or 项目引用示例

当前版本，还在持续更新 v4

持续维护 Continuous Maintenance

# 安装所需依赖
npm install

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