CondorModal

CondorModal 是一个基于 Naive UI 的模态框组件，支持拖拽、自定义标题、尺寸、按钮等功能。该组件提供了标准化的模态框接口，便于在项目中统一使用和管理弹窗。

组件 Props

参数名	类型	默认值	说明
title	string	''	模态框标题
isDraggable	boolean	true	是否可拖拽
width	string / number	'800px'	模态框宽度
height	string / number	''	模态框高度，默认自适应内容
cancelText	string	$t('common.cancel')	取消按钮文本（支持国际化）
subBtuText	string	$t('common.confirm')	确认按钮文本（支持国际化）
showAction	boolean	true	是否显示底部操作按钮区域
customClass	string	'condor-modal'	自定义CSS类名

组件事件

事件名	说明	参数
onOk	点击确认按钮时触发	type: string - 模态框类型
onClose	模态框关闭后触发	-

暴露的方法

组件通过 defineExpose 暴露以下方法：

方法名	说明	参数
open	打开模态框	options?: { title?: string; type?: string } - 打开选项
close	关闭模态框	-
setSubLoading	设置提交按钮加载状态	status: boolean - 加载状态
handleSubmit	触发提交操作	-

插槽

插槽名	说明	作用域参数
default	模态框主要内容区域	-
action	底部操作区域，覆盖默认按钮	-

基础用法

1. 基本模态框

<template>
  <div>
    <NButton @click="showModal">打开模态框</NButton>
    <CondorModal
      ref="modalRef"
      title="基本示例"
      @onOk="handleConfirm"
      @onClose="handleClose"
    >
      <p>这里是模态框的内容</p>
      <p>可以在这里放置任何内容</p>
    </CondorModal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const modalRef = ref();

const showModal = () => {
  modalRef.value.open();
};

const handleConfirm = (type: string) => {
  console.log('确认操作', type);
  modalRef.value.close();
};

const handleClose = () => {
  console.log('模态框已关闭');
};
</script>