4.0.6 • Published 6 months ago
antdv-pro-modal v4.0.6
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 |
@fullscreen | 全屏按钮点击触发事件 | function(e) | - |
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
当前版本,还在持续更新 v4
持续维护 Continuous Maintenance
# 安装所需依赖
npm install
# 打包生成dist目录含d.ts文件
npm run build