Element-UI
其他组件

抽屉组件 (Drawer)

# 抽屉组件 (Drawer)

Element-UI 的 Drawer 组件用于在屏幕一侧弹出一个可滑动的面板，可以在其中展示信息、表单或其他内容，适合需要更大空间或与主页面区隔的场景。

提示

Drawer 组件官方文档：https://element.eleme.cn/#/zh-CN/component/drawer (opens new window)

# 1. 基本用法

基本语法：使用 <el-drawer> 标签定义抽屉，设置 visible 属性控制其显示，title 属性定义标题，通过 slot 可以自定义内容。

<template>
  <div>
    <el-button type="primary" @click="drawer = true">打开 Drawer</el-button>
    <el-drawer title="示例 Drawer" :visible.sync="drawer" :size="size" direction="rtl" @close="handleClose">
      <span>这里是 Drawer 的内容</span>
      <el-button type="primary" @click="drawer = false">关闭</el-button>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false, // 控制 Drawer 的显示与隐藏
      size: '30%' // 控制 Drawer 的大小
    };
  },
  methods: {
    handleClose() {
      console.log('Drawer 关闭了');
    }
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

visible 绑定：通过 visible 属性与组件的 v-model 进行绑定，控制 Drawer 的显示与隐藏。
方向设置：使用 direction 属性控制 Drawer 的打开方向，可以选择 rtl、ltr、ttb 和 btt。

# Drawer 属性

参数	说明	类型	可选值	默认值
append-to-body	Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true	boolean	—	false
before-close	关闭前的回调，会暂停 Drawer 的关闭，回调函数接受一个 `done` 参数，用于在回调中手动关闭 Drawer	function(done: Function)	—	—
close-on-press-escape	是否可以通过按下 ESC 关闭 Drawer	boolean	—	true
custom-class	Drawer 的自定义类名	string	—	—
destroy-on-close	控制是否在关闭 Drawer 之后将子元素全部销毁	boolean	—	false
modal	是否需要遮罩层	boolean	—	true
modal-append-to-body	遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Drawer 的父元素上	boolean	—	true
direction	Drawer 打开的方向	string	rtl / ltr / ttb / btt	rtl
show-close	是否显示关闭按钮	boolean	—	true
size	Drawer 窗体的大小，支持像素值或百分比	number / string	—	'30%'
title	Drawer 的标题，可以通过 slot 自定义	string	—	—
visible	是否显示 Drawer，支持 `.sync` 修饰符	boolean	—	false
wrapperClosable	点击遮罩层是否可以关闭 Drawer	boolean	—	true
withHeader	控制是否显示 header 栏，若为 false，则 `title` 属性和 `title` slot 均不生效	boolean	—	true

# Drawer 方法

方法名	说明	参数
closeDrawer	用于关闭 Drawer，并调用 `before-close` 方法	—

# Drawer 事件

事件名称	说明	回调参数
open	Drawer 打开的回调	—
opened	Drawer 打开动画结束时的回调	—
close	Drawer 关闭的回调	—
closed	Drawer 关闭动画结束时的回调	—

# Drawer 插槽

名称	说明
—	Drawer 的内容
title	Drawer 标题区的内容

# 2. Drawer 常用示例

# 不同方向的 Drawer

通过 direction 属性，可以让 Drawer 从不同方向滑入。

<template>
  <div>
    <el-button @click="drawer = true">从右侧打开</el-button>
    <el-drawer :visible.sync="drawer" title="从右侧打开" direction="rtl">
      <p>这是一个从右侧滑出的 Drawer</p>
    </el-drawer>
    <el-button @click="drawerLeft = true">从左侧打开</el-button>
    <el-drawer :visible.sync="drawerLeft" title="从左侧打开" direction="ltr">
      <p>这是一个从左侧滑出的 Drawer</p>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false, // 控制从右侧打开的 Drawer
      drawerLeft: false // 控制从左侧打开的 Drawer
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 自定义大小的 Drawer

使用 size 属性可以自定义 Drawer 的宽度或高度。

<template>
  <div>
    <el-button @click="drawer = true">自定义大小的 Drawer</el-button>
    <el-drawer :visible.sync="drawer" title="自定义大小" :size="'50%'" direction="rtl">
      <p>这是一个宽度为 50% 的 Drawer</p>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false // 控制 Drawer 的显示与隐藏
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 使用 `before-close` 进行确认关闭

通过 before-close 属性可以在关闭 Drawer 之前进行一些操作，比如用户确认。

<template>
  <div>
    <el-button @click="drawer = true">带关闭确认的 Drawer</el-button>
    <el-drawer :visible.sync="drawer" title="关闭前确认" :before-close="beforeClose">
      <p>关闭前会进行确认</p>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false // 控制 Drawer 的显示与隐藏
    };
  },
  methods: {
    beforeClose(done) {
      this.$confirm('确定关闭吗？').then(() => {
        done(); // 调用 done 方法以关闭 Drawer
      });
    }
  }
};
</script>