Drawer 抽屉

从视口边缘滑出的内容容器，适合设置面板、详情面板和分步编辑。

基础用法

<template>
  <div class="drawer-demo">
    <div class="drawer-demo__actions">
      <AuButton type="primary" @click="openDrawer('rtl')">从右侧打开</AuButton>
      <AuButton @click="openDrawer('btt')">从底部打开</AuButton>
    </div>
    <AuDrawer
      v-model="drawerVisible"
      title="项目设置"
      :direction="drawerDirection"
      size="min(420px, calc(100vw - 16px))"
      close-on-click-modal
    >
      <form class="drawer-demo__form" @submit.prevent="saveSettings">
        <label>
          <span>项目名称</span>
          <input v-model.trim="settings.name" autofocus />
        </label>
        <label>
          <span>项目说明</span>
          <textarea v-model.trim="settings.description" rows="4"></textarea>
        </label>
      </form>
      <template #footer>
        <AuButton @click="drawerVisible = false">取消</AuButton>
        <AuButton type="primary" :disabled="!settings.name" @click="saveSettings">保存</AuButton>
      </template>
    </AuDrawer>
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { AuButton, AuDrawer } from 'aurora-plus';
const drawerVisible = ref(false);
const drawerDirection = ref('rtl');
const settings = reactive({
  name: '示例应用',
  description: '一个专注 Markdown 编辑体验的桌面应用。',
});
function saveSettings() {
  if (!settings.name) return;
  drawerVisible.value = false;
}
function openDrawer(direction) {
  drawerDirection.value = direction;
  drawerVisible.value = true;
}
</script>
<style scoped>
.drawer-demo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.drawer-demo__form,
.drawer-demo__form label {
  display: grid;
  gap: 14px;
}
.drawer-demo__form label {
  gap: 7px;
  color: var(--au-color-text-secondary);
  font-size: 13px;
}
.drawer-demo__form input,
.drawer-demo__form textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--au-color-border-default);
  border-radius: var(--au-radius-control);
  color: var(--au-color-text-primary);
  background: transparent;
  outline: none;
  resize: vertical;
}
.drawer-demo__form input:focus,
.drawer-demo__form textarea:focus {
  border-color: var(--au-color-primary);
}
</style>

Drawer API

Attributes

属性	说明	类型	默认值
modelValue / v-model	是否显示	boolean	false
title	默认标题	string
direction	打开方向：ltr 左侧、rtl 右侧、ttb 顶部、btt 底部	string	rtl
size	水平方向为宽度，垂直方向为高度；数字转换为 px	string / number	min(420px, calc(100vw - 16px))
fullWidth	左右侧抽屉铺满可用宽度，覆盖 size 与默认侧边留白，并移除圆角；上下抽屉不受影响	boolean	false
modal	是否启用透明模态交互层	boolean	true
lockScroll	显示期间是否锁定页面滚动	boolean	true
teleported	是否 Teleport 到 appendTo	boolean	true
appendTo	Teleport 目标节点或选择器	string / object	body
viewportPadding	抽屉交互层的视口内边距；支持 CSS padding 简写，数字转换为 px	string / number	0
closeOnClickModal	点击模态交互层是否关闭	boolean	true
closeOnPressEscape	按 Escape 是否关闭	boolean	true
showClose	是否显示标题栏关闭按钮	boolean	true
withHeader	是否渲染标题栏；关闭后标题、关闭按钮和 header 插槽均不渲染	boolean	true
closeLabel	关闭按钮提示	string	关闭抽屉
destroyOnClose	关闭过渡完成后是否销毁内容	boolean	false
beforeClose	关闭前守卫；接收 done，也支持返回布尔值或 Promise	(done) => void | boolean | Promise<boolean>	—
zIndex	基础层级；嵌套时实际层级至少比父浮层高 1，内部浮层自动继承	number	10000

Events

事件名	说明	参数
update:modelValue	组件内部请求关闭时更新绑定值	(visible: boolean)
open	开始打开时触发	—
opened	打开过渡结束后触发	—
close	组件内部触发关闭时调用	(reason: DrawerCloseReason)
closed	关闭过渡结束后触发	—
before-close-error	beforeClose 抛出异常或 Promise reject	(error: unknown)

Slots

插槽名	作用域参数	说明
default		抽屉正文
header		自定义标题栏内容
footer		底部操作区；未提供时不渲染 footer

Exposes

属性或方法	说明
close(reason?)	从组件实例主动关闭；默认 reason 为 api，仍会执行 beforeClose
drawerRef	抽屉内容根元素引用