Drawer 抽屉

从屏幕边缘滑出的浮层面板，支持四个方向，常用于表单操作、详情展示等场景。

基础用法

从右侧滑出，点击遮罩或按 Esc 关闭

vue

<script setup lang="ts">
import { ref } from "vue";
import { ADrawer, AButton } from "@lite-code/aui-vue";

const open = ref(false);
</script>

<template>
  <AButton @click="open = true">打开抽屉</AButton>
  <ADrawer :open="open" title="基础抽屉" @close="open = false">
    <p>这是抽屉的内容区域，可以放置任意内容。</p>
    <p>点击遮罩层或右上角关闭按钮，或按 Esc 键关闭。</p>
  </ADrawer>
</template>

弹出方向

支持 right / left / top / bottom 四个方向

vue

<script setup lang="ts">
import { ref } from "vue";
import { ADrawer, AButton } from "@lite-code/aui-vue";

const placement = ref<"left" | "right" | "top" | "bottom">("right");
const open = ref(false);

function show(p: typeof placement.value) {
  placement.value = p;
  open.value = true;
}
</script>

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap">
    <AButton @click="show('right')">Right（默认）</AButton>
    <AButton @click="show('left')">Left</AButton>
    <AButton @click="show('top')">Top</AButton>
    <AButton @click="show('bottom')">Bottom</AButton>
  </div>

  <ADrawer
    :open="open"
    :placement="placement"
    :title="`从 ${placement} 滑出`"
    @close="open = false"
  >
    <p>当前方向：{{ placement }}</p>
  </ADrawer>
</template>

自定义底部

通过 #footer 插槽完全自定义底部操作区

vue

<script setup lang="ts">
import { ref } from "vue";
import { ADrawer, AButton } from "@lite-code/aui-vue";

const open = ref(false);
</script>

<template>
  <AButton @click="open = true">自定义底部</AButton>
  <ADrawer :open="open" title="自定义 Footer" @close="open = false">
    <p>通过 <code>#footer</code> 插槽可以完全自定义底部操作区。</p>

    <template #footer>
      <AButton variant="secondary" size="sm" @click="open = false"
        >取消</AButton
      >
      <AButton variant="danger" size="sm" @click="open = false">删除</AButton>
      <AButton size="sm" @click="open = false">保存</AButton>
    </template>
  </ADrawer>
</template>

API

Props

属性	类型	默认值	说明
open	boolean	—	是否显示（必填）
title	string	—	标题文字
placement	DrawerPlacement	'right'	弹出方向：right | left | top | bottom
width	number | string	360	抽屉宽度（left/right 方向）
height	number | string	320	抽屉高度（top/bottom 方向）
closable	boolean	true	是否显示关闭按钮，也控制点击遮罩/Esc 是否关闭
bodyStyle	object	—	内容区自定义样式

Events

事件	说明
@close	关闭抽屉时触发（需更新 open）

Slots

插槽	说明
default	抽屉内容区
title	自定义标题（覆盖 title prop）
footer	自定义底部，不传则显示「取消」「确定」默认按钮；传空则隐藏底部