Modal 弹出层

EvModal 全屏遮罩 + 居中面板：Teleport 到 body，Esc / 点击遮罩 / 关闭按钮关闭（均可配）， 打开期间锁定页面滚动，焦点自动移入并在面板内首尾循环（Tab 圈闭）、关闭后归还触发元素。 适合订阅邀请、邮箱验证、确认对话等轻量弹出场景。

基础用法

标题 + 内容 + 底部动作

遮罩点击与 Esc 默认可关闭；footer 插槽放动作按钮。

<EvModal v-model="visible" title="开通团队空间">
  <p>内容区…</p>
  <template #footer>
    <EvButton @click="visible = false">再想想</EvButton>
    <EvButton type="primary">开通</EvButton>
  </template>
</EvModal>

弹出层 + 表单：邮箱验证

弹出输入邮箱并验证

两步式邮箱验证：填邮箱 → 收验证码 → 提交；Esc / 遮罩点击关闭均已内置。

<EvModal v-model="visible" title="验证你的邮箱" width="440px">
  <EvField label="邮箱" required>
    <EvInput v-model="email" type="email" />
  </EvField>
  <EvField label="验证码">
    <EvInput v-model="code" placeholder="6 位验证码" />
  </EvField>
  <template #footer>
    <EvButton :disabled="!sent" @click="done">完成验证</EvButton>
  </template>
</EvModal>

磨砂玻璃面板

glass 磨砂面板

玻璃态下面板变半透明雾面，底层页面透出模糊色彩；blur 可单独调强度。

<EvModal v-model="visible" glass title="磨砂面板">
  <p>面板呈半透明雾面…</p>
</EvModal>

API

Props

属性	说明	类型	默认值
modelValue (v-model)	可见性	boolean	false
title	标题（header 插槽优先）	string	''
width	面板宽度（数字按 px）	string | number	'560px'
overlay-close	点击遮罩关闭	boolean	true
esc-close	Esc 关闭	boolean	true
lock-scroll	打开期间锁定页面滚动	boolean	true
show-close	右上角关闭按钮	boolean	true
glass	磨砂玻璃面板；缺省跟随全局（ConfigProvider glass）	boolean	—
blur	磨砂强度（px），内联覆盖 --ev-glass-blur	string / number	—
saturate	磨砂饱和度（倍数），内联覆盖 --ev-glass-saturate	string / number	—
tint	磨砂底色浓度（%），内联覆盖 --ev-glass-bg	string / number	—

事件

事件	说明
update:modelValue	可见性双向绑定
open / opened	开始打开 / 进出场结束
close / closed	开始关闭 / 离场结束

插槽

插槽	说明
default	内容区
header	头部覆写（含标题）
footer	底部动作区