Modal

Modal dialog that displays content in an overlay, guiding users through related actions.

Basic Usage

Control visibility with v-model. Default layout includes title, content area, confirm and cancel buttons.

<template>
  <ABtn @click="show = true">Open Modal</ABtn>
  <AModal v-model="show" title="Notification">
    This is the modal content area.
  </AModal>
</template>

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

Custom Width

Set modal width with the width prop.

<AModal v-model="show" title="Wide Modal" width="800px">
  This modal is 800px wide.
</AModal>

No Footer

Hide the footer button area.

<AModal v-model="show" title="No Footer">
  This modal has no footer buttons.
</AModal>

Confirm Loading

Shows loading state on the confirm button to prevent duplicate submissions.

<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 Action" :confirm-loading="loading" @confirm="onConfirm">
  Are you sure?
</AModal>

Custom Footer

Use the footer slot to customize the bottom buttons.

<AModal v-model="show" title="Long Content Example">
  <p>The modal content area can hold any content.</p>
  <template #footer>
    <ABtn variant="ghost" @click="show = false">Later</ABtn>
    <ABtn variant="primary" @click="show = false">Got it</ABtn>
  </template>
</AModal>

API

Props

Name	Type	Default	Description
modelValue	boolean	false	Visibility
title	string	—	Title
width	string	'520px'	Modal width
closable	boolean	true	Show close button, support Esc
maskClosable	boolean	true	Close on mask click
confirmText	string	'确认'	Confirm button text
cancelText	string	'取消'	Cancel button text
confirmLoading	boolean	false	Confirm button loading

Events

Name	Description
update:modelValue	Visibility changed
open	Modal opened
close	Modal closed
confirm	Confirm button clicked
cancel	Cancel button clicked

Slots

Name	Description
default	Modal body content
header	Custom header (overrides title)
footer	Custom footer (overrides default buttons)

Interaction

• Opens with panel animating from scale(0.92) translateY(12px) to normal state with spring curve
• Closes with panel scaling to scale(0.96) and mask fading out
• Mask click closes (disable via maskClosable)
• Esc key closes (disable via closable)
• Body scroll locked on open, restored on close