Modal 模态框

模态对话框，在浮层中显示内容，引导用户进行相关操作。

基本用法

通过 v-model 控制显示/隐藏，默认包含标题、内容区、确认和取消按钮。

<template>
  <ABtn @click="show = true">打开模态框</ABtn>
  <AModal v-model="show" title="提示">
    这是模态框的内容区域。
  </AModal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const show = ref(false)
</script>

自定义宽度

通过 width 属性设置模态框宽度。

<AModal v-model="show" title="宽模态框" width="800px">
  这个模态框宽度为 800px。
</AModal>

无页脚

不显示底部按钮区域。

<AModal v-model="show" title="无页脚">
  这个模态框没有底部按钮。
</AModal>

确认加载

点击确认按钮后进入加载状态，防止重复提交。

<script setup>
const show = ref(false)
const loading = ref(false)

function onConfirm() {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    show.value = false
  }, 2000)
}
</script>

<AModal v-model="show" title="确认操作" :confirm-loading="loading" @confirm="onConfirm">
  确认执行此操作吗？
</AModal>

自定义页脚

通过 footer 插槽自定义底部按钮。

<AModal v-model="show" title="长内容示例">
  <p>模态框的主体内容区域可以放置任意内容。</p>
  <template #footer>
    <ABtn variant="ghost" @click="show = false">稍后再说</ABtn>
    <ABtn variant="primary" @click="show = false">我知道了</ABtn>
  </template>
</AModal>

API

Props

名称	类型	默认值	说明
modelValue	boolean	false	是否显示
title	string	—	标题
width	string	'520px'	模态框宽度
closable	boolean	true	是否显示关闭按钮，支持 Esc 关闭
maskClosable	boolean	true	点击遮罩层是否关闭
confirmText	string	'确认'	确认按钮文本
cancelText	string	'取消'	取消按钮文本
confirmLoading	boolean	false	确认按钮加载中

Events

名称	说明
update:modelValue	显示状态变化
open	模态框打开时触发
close	模态框关闭时触发
confirm	点击确认按钮时触发
cancel	点击取消按钮时触发

Slots

名称	说明
default	模态框主体内容
header	自定义顶部区域（覆盖 title）
footer	自定义底部按钮区域（覆盖默认按钮）

交互特性

• 打开时 panel 从 scale(0.92) translateY(12px) 到正常状态，配合 spring 曲线回弹
• 关闭时 panel 缩小到 scale(0.96)，遮罩淡出
• 遮罩点击关闭（可通过 maskClosable 禁用）
• Esc 键关闭（可通过 closable 禁用）
• 打开时锁定 body 滚动，关闭时恢复