---
url: /components/modal.md
---
# Modal 弹出层

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

## 基础用法

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

## 弹出层 + 表单：邮箱验证

```vue
<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>
```

## 磨砂玻璃面板

```vue
<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 | 底部动作区 |