当前位置：首页 > 前端教程

elementui抽屉

2026-03-05 18:34:50前端教程

ElementUI 抽屉组件使用指南

ElementUI 的抽屉（Drawer）组件是一种从页面边缘滑出的面板，常用于展示额外内容或操作。以下为详细使用方法及注意事项。

基本用法

通过 v-model 控制抽屉的显示与隐藏，direction 属性指定抽屉滑出方向（默认为 rtl 即右侧滑出）：

elementui抽屉

<el-button @click="drawerVisible = true">打开抽屉</el-button>
<el-drawer v-model="drawerVisible" title="标题">
  <span>抽屉内容</span>
</el-drawer>

data() {
  return {
    drawerVisible: false
  }
}

自定义方向

通过 direction 设置滑动方向，可选值：rtl（右→左）、ltr（左→右）、ttb（上→下）、btt（下→上）：

<el-drawer v-model="visible" direction="btt">
  内容从底部弹出
</el-drawer>

尺寸控制

使用 size 属性设置宽度/高度（默认 30%），支持百分比或固定像素值：

elementui抽屉

<el-drawer v-model="visible" size="50%">
  宽度占父容器50%
</el-drawer>
<el-drawer v-model="visible" direction="ttb" size="200px">
  高度固定200px
</el-drawer>

嵌套抽屉

可在抽屉内再触发新的抽屉，注意控制状态变量避免冲突：

<el-drawer v-model="firstDrawer" title="一级抽屉">
  <el-button @click="secondDrawer = true">打开二级抽屉</el-button>
</el-drawer>
<el-drawer v-model="secondDrawer" title="二级抽屉">
  嵌套内容
</el-drawer>

事件与插槽

常用事件包括 open（打开时触发）、close（关闭时触发）。通过插槽自定义标题和内容：

<el-drawer v-model="visible">
  <template #title>
    <h4>自定义标题</h4>
  </template>
  <template #default>
    <p>主体内容</p>
  </template>
  <template #footer>
    <el-button @click="visible = false">关闭</el-button>
  </template>
</el-drawer>