Drawer 抽屉

屏幕边缘滑出的浮层面板，常用于导航菜单、设置面板等场景。

基础用法

基本抽屉组件，默认从右侧滑出。

<template>
  <ImDrawer v-model="drawer">
    <ImDrawerHeader>抽屉标题</ImDrawerHeader>
    <ImDrawerBody>抽屉内容区域</ImDrawerBody>
    <ImDrawerFooter>抽屉底部区域</ImDrawerFooter>
  </ImDrawer>
  <ImButton @click="drawer = true">打开抽屉</ImButton>
</template>

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

不同方向

通过 placement 属性控制抽屉出现方向，支持四个方向：

<template>
  <ImDrawer v-model="left" placement="left">
    <ImDrawerHeader>抽屉标题</ImDrawerHeader>
    <ImDrawerBody>抽屉内容区域</ImDrawerBody>
    <ImDrawerFooter>抽屉底部区域</ImDrawerFooter>
  </ImDrawer>
</template>

自定义尺寸

通过 size 属性自定义抽屉大小，支持百分比或具体像素值：

<template>
  <ImDrawer v-model="customSize" size="50%">
    <ImDrawerHeader>抽屉标题</ImDrawerHeader>
    <ImDrawerBody>抽屉内容区域</ImDrawerBody>
    <ImDrawerFooter>抽屉底部区域</ImDrawerFooter>
  </ImDrawer>
  <ImButton @click="customSize = true">打开半宽抽屉</ImButton>
</template>

关闭行为控制

<template>
  <ImDrawer
    v-model="open"
    :close-on-click-mask="false"
    title="需确认关闭的抽屉">
    <ImDrawerHeader>抽屉标题</ImDrawerHeader>
    <ImDrawerBody>抽屉内容区域</ImDrawerBody>
    <ImDrawerFooter
      ><ImButton @click="open = false">点击关闭</ImButton></ImDrawerFooter
    >
  </ImDrawer>
  <ImButton @click="open = true">打开抽屉</ImButton>
</template>

API

Drawer 组件提供了以下属性：

属性	类型	描述	默认值	其他值
modelValue	Boolean	抽屉是否可见	false	-
mask	Boolean	抽屉模态框可见	true	-
closeOnClickMask	Boolean	点击模态框是否关闭抽屉	true	-
zIndex	Number	抽屉的 z-index	1000	-
placement	String	抽屉出现的位置	right	top, bottom, left
closeOnEscape	Boolean	是否可以通过按 ESC 键关闭抽屉	-	-

涉及的组件

ImDrawerHeaderImDrawerBodyImDrawerFooter

ImDrawerFooter 组件用于抽屉的底部区域，通常包含关闭按钮或其他操作。flex 布局，默认 flex-start 对齐。可以设置 align 属性来改变对齐方式。