Drawer 抽屉
从屏幕边缘滑出的面板，适合设置菜单、玩家列表、详情面板和移动端导航。
右侧抽屉
vue
<script setup lang="ts">
import { ref } from 'vue'
const open = ref(false)
</script>
<template>
<mc-button variant="primary" @click="open = true">打开设置</mc-button>
<mc-drawer v-model:open="open" title="设置">
设置内容
</mc-drawer>
</template>左侧抽屉
设置 placement="left" 可使抽屉从左侧滑出，适合导航菜单等场景。
html
<mc-button @click="leftOpen = true">打开菜单</mc-button>
<mc-drawer v-model:open="leftOpen" title="导航菜单" placement="left">
<mc-list @change="(v) => console.log('点击了', v)">
<mc-list-item label="首页" value="home" />
<mc-list-item label="服务器列表" value="servers" />
<mc-list-item label="玩家中心" value="players" />
<mc-list-item label="设置" value="settings" />
</mc-list>
<mc-button variant="primary">新建存档</mc-button>
<mc-button>加载存档</mc-button>
<mc-button variant="error">删除存档</mc-button>
</mc-drawer>顶部抽屉
设置 placement="top" 可使抽屉从顶部滑出。
html
<mc-button @click="topOpen = true">打开通知</mc-button>
<mc-drawer v-model:open="topOpen" title="系统通知" placement="top">
暂无新通知
</mc-drawer>底部抽屉
设置 placement="bottom" 可使抽屉从底部滑出，适合操作面板、移动端菜单等场景。
html
<mc-button @click="bottomOpen = true">打开操作面板</mc-button>
<mc-drawer v-model:open="bottomOpen" title="操作面板" placement="bottom">
<mc-button variant="primary">新建存档</mc-button>
<mc-button>加载存档</mc-button>
<mc-button variant="error">删除存档</mc-button>
</mc-drawer>Teleport 渲染位置
默认情况下抽屉使用 <Teleport to="body"> 将内容渲染到 <body> 末尾，避免被父容器 overflow: hidden 裁剪。
当抽屉放在固定高度的演示容器内（如 Layout 页面中的布局示例），需要设置 :teleport="false" 使其就地渲染，方可正确显示。
参考 Layout 页面 中的导航抽屉使用方式。
Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
open | boolean | false | 是否打开（v-model:open） |
title | string | '' | 标题 |
placement | 'left' | 'right' | 'top' | 'bottom' | right | 出现位置 |
closeOnOverlay | boolean | true | 点击遮罩是否关闭 |
teleport | string | boolean | 'body' | Teleport 目标选择器，传 false 则在父容器内就地渲染 |
Events
| 事件 | 参数 | 说明 |
|---|---|---|
update:open | boolean | 打开状态变化 |
close | - | 关闭抽屉 |
Slots
| 名称 | 说明 |
|---|---|
default | 抽屉主体内容 |
header | 自定义头部 |
footer | 底部区域 |