Drawer 抽屉

从屏幕边缘滑入的面板。四个方向，可无遮罩。

基础用法

<script setup>
import { ref } from 'vue'
const visible = ref(false)
</script>

<template>
  <SrButton @click="visible = true">打开抽屉</SrButton>

  <SrDrawer v-model="visible" title="抽屉标题">
    内容
  </SrDrawer>
</template>

与 Modal 的分工

	SrModal	SrDrawer
位置	屏幕中央	贴边
适用	需要专注的事（确认、填表）	补充信息、不打断当前上下文
空间	受宽度限制	可从边缘拉出很大空间

一句话：Modal 要求用户"先处理完这件事"，Drawer 允许用户"顺便看一眼"。

从列表点进详情、打开设置面板、查看通知——这些用 Drawer； 删除确认、重要表单——用 Modal。

无遮罩模式

:overlay="false" 时不显示遮罩，背景可以正常操作。

<SrDrawer v-model="visible" :overlay="false" />

无遮罩时的滚动

:overlay="false" 会自动关闭滚动锁定——既然背景可操作， 锁住滚动就自相矛盾了。

这也意味着抽屉与背景可能同时滚动，视觉上会有些乱。 若内容较多，建议给抽屉内部设一个自己的滚动区域。

尺寸

<SrDrawer size="sm" />        <!-- 320px -->
<SrDrawer size="md" />        <!-- 420px -->
<SrDrawer size="lg" />        <!-- 560px -->
<SrDrawer size="xl" />        <!-- 720px -->
<SrDrawer dimension="50%" />  <!-- 自定义，按方向解释为宽或高 -->

尺寸	左右方向（宽）	上下方向（高）
sm	320px	200px
md	420px	280px
lg	560px	360px
xl	720px	480px

dimension 优先于 size，且按方向自动解释——左右方向当宽度、 上下方向当高度，不必自己判断。

底部操作区

<SrDrawer v-model="visible" title="筛选">
  筛选条件

  <template #footer>
    <SrSpace justify="end">
      <SrButton>重置</SrButton>
      <SrButton variant="primary">应用</SrButton>
    </SrSpace>
  </template>
</SrDrawer>

Props

名称	类型	默认值	说明
modelValue	boolean	false	是否显示
title	string	—	标题，也可用 header 插槽
placement	'left' | 'right' | 'top' | 'bottom'	'right'	滑入方向
size	'sm' | 'md' | 'lg' | 'xl'	'md'	尺寸
dimension	string	—	自定义宽/高，优先于 size
closeOnOverlay	boolean	true	点击遮罩是否关闭
closeOnEscape	boolean	true	ESC 是否关闭
closable	boolean	true	是否显示关闭按钮
lockScroll	boolean	true	是否锁定背景滚动（:overlay="false" 时自动关闭）
overlay	boolean	true	是否显示遮罩
showFooter	boolean	false	是否显示底部

插槽

名称	说明
default	内容区
header	自定义头部
footer	底部区域

事件

事件	说明
update:modelValue	显隐变化
open / close	打开 / 关闭

无障碍

• 与 Modal 相同的四要素（Teleport、层级令牌、ESC 与焦点归还、滚动锁定）， 详见 Modal 开头的说明
• 容器带 role="dialog" 与 aria-modal
• :overlay="false" 时不应设 aria-modal="true"—— 背景既然可操作，宣称"模态"会误导读屏软件屏蔽背景内容