AiModal AI 模态框
可配置、可拖拽的模态对话框，基于 Naive UI n-modal + n-card 构建。
使用方式
<template>
<ai-modal ref="modalRef">
<div>模态框内容</div>
</ai-modal>
<n-button @click="openModal">打开</n-button>
</template>
<script setup>
import { ref } from 'vue'
const modalRef = ref()
function openModal() {
modalRef.value.open({
title: '编辑',
width: '600px',
okText: '保存',
onOk: async () => {
await saveData()
return true // 返回 true 关闭模态框
}
})
}
</script>
Props（默认值可通过 open() 覆盖）
| 属性 |
类型 |
默认值 |
说明 |
width |
String |
'520px' |
模态框宽度 |
title |
String |
- |
标题 |
closable |
Boolean |
true |
显示关闭按钮 |
maskClosable |
Boolean |
false |
点击遮罩关闭 |
draggable |
Boolean |
true |
是否可拖拽 |
cancelText |
String |
'取消' |
取消按钮文字 |
okText |
String |
'确定' |
确认按钮文字 |
showFooter |
Boolean |
true |
显示底部按钮区 |
showCancel |
Boolean |
true |
显示取消按钮 |
showOk |
Boolean |
true |
显示确认按钮 |
cancelType |
String |
'default' |
取消按钮类型 |
okType |
String |
'primary' |
确认按钮类型 |
cancelGhost |
Boolean |
false |
取消按钮幽灵模式 |
okGhost |
Boolean |
false |
确认按钮幽灵模式 |
modalStyle |
Object |
- |
模态框自定义样式 |
contentStyle |
Object |
- |
内容区自定义样式 |
segmented |
Boolean/Object |
- |
分段样式 |
showHeader |
Boolean |
true |
显示头部 |
showHeaderExtra |
Boolean |
true |
显示头部额外操作区 |
onOk |
Function |
- |
确认回调（可返回 Promise / boolean） |
onCancel |
Function |
- |
取消回调 |
onClose |
Function |
- |
关闭回调 |
暴露方法
| 方法 |
说明 |
open(options) |
打开模态框，传入配置选项 |
close() |
关闭模态框 |
handleOk() |
触发确认逻辑 |
handleCancel() |
触发取消逻辑 |
暴露属性
| 属性 |
类型 |
说明 |
show |
Ref<boolean> |
当前显示状态 |
okLoading |
Ref<boolean> |
确认按钮 loading 状态 |
options |
Object |
当前配置选项 |
依赖
naive-ui./utils.js（拖拽初始化）
