Skip to content

Drawer 抽屉

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

基础用法

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

vue
<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 属性控制抽屉出现方向,支持四个方向:

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

自定义尺寸

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

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

关闭行为控制

vue
<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 组件提供了以下属性:

属性类型描述默认值其他值
modelValueBoolean抽屉是否可见false-
maskBoolean抽屉模态框可见true-
closeOnClickMaskBoolean点击模态框是否关闭抽屉true-
zIndexNumber抽屉的 z-index1000-
placementString抽屉出现的位置righttop, bottom, left
closeOnEscapeBoolean是否可以通过按 ESC 键关闭抽屉--

涉及的组件

ImDrawerHeaderImDrawerBodyImDrawerFooter

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

基于 MIT 协议发布