抽屉和对话框类似，但是有的时候使用抽屉能带来不同的UI体验，比如用在属性展示上
| 参数 | 说明 |
|---|---|
| title | 抽屉标题 |
| visible.sync | 展示/隐藏 |
| direction | 打开方向 rtl / ltr / ttb / btt |
# 例子
<el-drawer
title="数据源属性"
:visible.sync="drawer"
direction="rtl"
>
<el-form
ref="postForm"
:rules="rules"
:model="postForm"
label-position="right"
label-width="100px"
style="width: 400px;padding-left: 20px"
>
<el-form-item ref="name" label="名称" prop="name">
<el-input v-model="postForm.name" />
</el-form-item>
<el-form-item ref="address" label="调用地址" prop="address">
<el-input v-model="postForm.address" />
</el-form-item>
<el-form-item ref="contentType" label="请求头" prop="contentType">
<el-input v-model="postForm.contentType" />
</el-form-item>
<el-form-item label="请求方法" prop="请求方法">
<el-select v-model="postForm.method" class="filter-item" style="width: 280px">
<el-option v-for="item in methodOptions" :key="item.key" :label="item.display_name" :value="item.key" />
</el-select>
</el-form-item>
<el-form-item ref="timeout" label="超时时间" prop="timeout">
<el-input v-model="postForm.timeout" style="width: 280px">
<template slot="append">毫秒</template>
</el-input>
</el-form-item>
<el-form-item label="重试次数" prop="重试次数">
<el-select v-model="postForm.retry" class="filter-item" style="width: 280px">
<el-option v-for="n in 10" :key="n" :label="n - 1" :value="n - 1" />
</el-select>
</el-form-item>
<el-form-item label="携带文件" prop="携带文件">
<el-select v-model="postForm.withFile" class="filter-item" style="width: 280px">
<el-option v-for="item in withFileOptions" :key="item.key" :label="item.display_name" :value="item.key" />
</el-select>
</el-form-item>
<el-form-item label="是否回调" prop="是否回调">
<el-select v-model="postForm.callBack" class="filter-item" style="width: 280px">
<el-option v-for="item in callBackOptions" :key="item.key" :label="item.display_name" :value="item.key" />
</el-select>
</el-form-item>
</el-form>
<div style="float: right; margin-right: 25px">
<el-button @click="drawer = false">
取消
</el-button>
<el-button type="primary" @click="editAttr">
修改
</el-button>
</div>
</el-drawer>
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
说明
使用抽屉需要elementUI2.13.0版本及以上
一般需要设置destroy-on-close，避免打开时存在上一次遗留的操作记录