Modal 弹窗

用于需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层。

基础用法

点击按钮打开弹窗，支持点击遮罩层或按 ESC 关闭

vue

<template>
  <button class="aui-btn aui-btn-md aui-btn-primary" @click="open = true">
    打开 Modal
  </button>

  <AModal :open="open" title="基础弹窗" @close="open = false">
    <p>这是一个基础弹窗示例，点击取消、确定或遮罩层均可关闭。</p>
  </AModal>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { AModal } from "@lite-code/aui-vue";

const open = ref(false);
</script>

类型

Modal 内置了 4 个类型的样式：info、success、error、warning，为了方便调用，设计为静态函数。

Modal 内置了 4 个类型的样式，设计为静态函数

vue

<template>
  <ASpace>
    <AButton variant="outline" @click="handleModal('show')">show</AButton>
    <AButton variant="primary" @click="handleModal('info')">info</AButton>
    <AButton
      variant="primary"
      style="background: #ff4d4f; border-color: #ff4d4f"
      @click="handleModal('error')"
      >error</AButton
    >
    <AButton
      variant="primary"
      style="background: #52c41a; border-color: #52c41a"
      @click="handleModal('success')"
      >success</AButton
    >
    <AButton
      variant="primary"
      style="background: #fa8c16; border-color: #fa8c16"
      @click="handleModal('warning')"
      >warning</AButton
    >
  </ASpace>
</template>

<script setup lang="ts">
import { Modal, AButton, ASpace } from "@lite-code/aui-vue";

const configs = {
  show: { title: "基础弹窗", content: "这是一个基础弹窗，不带状态图标。" },
  info: { title: "信息提示", content: "这是一条纯信息展示，不带有状态含义。" },
  error: { title: "操作失败", content: "提交过程中发生错误，请稍后重试。" },
  success: { title: "操作成功", content: "您的数据已成功保存。" },
  warning: { title: "注意", content: "此操作不可撤销，请谨慎继续。" },
} as const;

function handleModal(type: keyof typeof configs) {
  Modal[type](configs[type]);
}
</script>

确认框

调用 Modal.confirm() 可以快捷显示确认框；onOk 与 onClose 返回 Promise 时，会等待 Promise resolve 后关闭 Modal。

调用 Modal.confirm() 显示确认框，支持异步 onOk

vue

<template>
  <button
    class="aui-btn aui-btn-md aui-btn-outline"
    @click="handleConfirm"
  >
    confirm
  </button>
</template>

<script setup lang="ts">
import { Modal } from '@lite-code/aui-vue'

function handleConfirm() {
  Modal.confirm({
    title: '确认删除',
    content: '删除后数据将无法恢复，是否继续？',
    text: { ok: '删除', cancel: '取消' },
    onOk: () => new Promise((resolve) => setTimeout(resolve, 1500)),
  })
}
</script>

遮罩

通过 mask 属性控制遮罩的显示。mask=false 隐藏遮罩，{ blur: true } 显示模糊遮罩。

通过 mask 属性控制遮罩显示方式

vue

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap">
    <button
      class="aui-btn aui-btn-md aui-btn-secondary"
      @click="openWith({ blur: true })"
    >
      mask blur
    </button>
    <button
      class="aui-btn aui-btn-md aui-btn-secondary"
      @click="openWith(false)"
    >
      mask=false
    </button>
  </div>

  <AModal :open="open" :mask="mask" title="遮罩示例" @close="open = false">
    <p>
      {{
        mask === false
          ? "当前无遮罩，背景可交互，点击外部不会关闭弹窗。"
          : "当前使用模糊遮罩，点击遮罩可关闭弹窗。"
      }}
    </p>
  </AModal>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { AModal } from "@lite-code/aui-vue";

const open = ref(false);
const mask = ref<boolean | { blur: boolean }>(true);

function openWith(m: boolean | { blur: boolean }) {
  mask.value = m;
  open.value = true;
}
</script>

自定义底部

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

通过 #footer 插槽传入自定义内容

vue

<template>
  <button class="aui-btn aui-btn-md aui-btn-outline" @click="open = true">
    自定义底部
  </button>

  <AModal :open="open" title="自定义底部" @close="open = false">
    <p>通过 <code>footer</code> 插槽可以完全自定义底部操作区域。</p>
    <template #footer>
      <button class="aui-btn aui-btn-md aui-btn-primary" @click="open = false">
        我知道了
      </button>
    </template>
  </AModal>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { AModal } from "@lite-code/aui-vue";

const open = ref(false);
</script>

隐藏底部

传入 :footer="null" 可完全隐藏底部操作区。

传入 :footer='null' 隐藏底部，适合纯展示型弹窗

vue

<template>
  <button class="aui-btn aui-btn-md aui-btn-secondary" @click="open = true">
    无底部
  </button>

  <AModal :open="open" :footer="null" title="纯内容弹窗" @close="open = false">
    <p>传入 <code>:footer="null"</code> 可隐藏底部操作区。</p>
    <p style="margin-top: 8px">通过右上角 ✕ 或按 ESC 关闭。</p>
  </AModal>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { AModal } from "@lite-code/aui-vue";

const open = ref(false);
</script>

API

Props

属性	类型	默认值	说明
open	boolean	—	是否显示弹窗
title	string	—	弹窗标题
width	number | string	520	弹窗宽度
closable	boolean	true	是否显示右上角关闭按钮
mask	boolean | { blur?: boolean }	true	遮罩配置；false 隐藏遮罩；{ blur: true } 模糊遮罩
footer	null	undefined	传入 null 隐藏底部；undefined 显示默认确认/取消按钮

Slots

插槽名	说明
default	弹窗内容
title	自定义标题
footer	自定义底部；不传则显示默认按钮

Events

事件	说明
close	关闭时触发，点击遮罩或 ESC 均触发

静态方法（从 Modal 导入）

方法	说明
Modal.show()	基础弹窗，无状态图标
Modal.info()	信息类型弹窗
Modal.success()	成功类型弹窗
Modal.error()	错误类型弹窗
Modal.warning()	警告类型弹窗
Modal.confirm()	确认框，支持 Promise

StaticModalOptions（show / info / success / error / warning）

属性	类型	说明
title	string	弹窗标题
content	string	弹窗内容
width	number | string	弹窗宽度
okText	string	确认按钮文案
onClose	() => void	关闭回调

ConfirmOptions（confirm）

属性	类型	说明
title	string	弹窗标题
content	string	弹窗内容
text	{ ok?: string; cancel?: string }	按钮文案
onOk	() => void | Promise<void>	确认回调，返回 Promise 时等待后关闭
onClose	() => void | Promise<void>	取消回调，返回 Promise 时等待后关闭