# Drawer 抽屉
简单抽屉，对 el-drawer 进行了二次封装，提供了一些扩展功能。
# 基本用法
点击查看代码
<template>
<div>
<el-button type="primary" @click="drawerVisible = true">点击打开抽屉</el-button>
<s-drawer :visible.sync="drawerVisible" title="基本抽屉">
<div>基本抽屉</div>
</s-drawer>
</div>
</template>
<script>
export default {
data() {
return {
drawerVisible: false
};
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 打开方向
点击查看代码
<template>
<div>
<el-descriptions :column="1" colon>
<el-descriptions-item label="打开方向">
<el-radio-group v-model="drawerDirection">
<el-radio v-for="item in drawerDirectionOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
</el-radio-group>
</el-descriptions-item>
</el-descriptions>
<el-button type="primary" @click="drawerVisible = true">点击打开抽屉</el-button>
<s-drawer :visible.sync="drawerVisible" title="打开方向" :direction="drawerDirection">
<div>抽屉打开方向</div>
</s-drawer>
</div>
</template>
<script>
export default {
data() {
return {
drawerVisible: false,
drawerDirection: "rtl",
drawerDirectionOptions: [
{ value: "rtl", label: "rtl（右）" },
{ value: "ltr", label: "ltr（左）" },
{ value: "ttb", label: "ttb（上）" },
{ value: "btt", label: "btt（下）" }
]
};
}
}
</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
26
27
28
29
30
31
32
33
34
35
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
# 抽屉大小
点击查看代码
<template>
<div>
<el-button type="primary" @click="drawerVisible = true">点击打开抽屉</el-button>
<s-drawer :visible.sync="drawerVisible" title="抽屉大小" size="500px">
<div>指定抽屉大小</div>
</s-drawer>
</div>
</template>
<script>
export default {
data() {
return {
drawerVisible: false
};
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 加载中状态
点击查看代码
<template>
<div>
<el-button type="primary" @click="drawerVisible = true">点击打开抽屉</el-button>
<s-drawer :visible.sync="drawerVisible" title="加载中状态" size="500px" :loading="drawerLoading" @open="handleOpen" @ok="done => done()">
<div>抽屉加载中状态</div>
</s-drawer>
</div>
</template>
<script>
export default {
data() {
return {
drawerVisible: false,
drawerLoading: false
};
},
methods: {
handleOpen() {
this.drawerLoading = true;
setTimeout(() => {
this.drawerLoading = false;
}, 1500);
}
}
}
</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
26
27
28
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
# 显示操作栏
点击查看代码
<template>
<div>
<el-button type="primary" @click="drawerVisible = true">点击打开抽屉</el-button>
<s-drawer :visible.sync="drawerVisible" title="显示操作栏" footer @ok="done => done()">
<div>显示抽屉底部操作栏</div>
</s-drawer>
</div>
</template>
<script>
export default {
data() {
return {
drawerVisible: false
};
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 自定义操作栏
点击查看代码
<template>
<div>
<el-button type="primary" @click="drawerVisible = true">点击打开抽屉</el-button>
<s-drawer :visible.sync="drawerVisible" title="自定义操作栏">
<div>自定义抽屉操作栏</div>
<template #footer>
<el-button type="primary" @click="drawerVisible = false">自定义按钮</el-button>
</template>
</s-drawer>
</div>
</template>
<script>
export default {
data() {
return {
drawerVisible: false
};
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 自定义按钮文本
点击查看代码
<template>
<div>
<el-button type="primary" @click="drawerVisible = true">点击打开抽屉</el-button>
<s-drawer :visible.sync="drawerVisible" title="自定义按钮文本" footer cancelText="关 闭" okText="保 存" @ok="done => done()">
<div>自定义抽屉操作按钮文本</div>
</s-drawer>
</div>
</template>
<script>
export default {
data() {
return {
drawerVisible: false
};
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 嵌套抽屉
点击查看代码
<template>
<div>
<el-button type="primary" @click="outerDrawerVisible = true">点击打开抽屉</el-button>
<s-drawer :visible.sync="outerDrawerVisible" title="外部抽屉" size="600px">
<div style="margin-bottom: 1rem;">外部抽屉</div>
<el-button type="primary" @click="innerDrawerVisible = true">打开内部抽屉</el-button>
<s-drawer :visible.sync="innerDrawerVisible" title="内部抽屉" size="350px">
<div>内部抽屉</div>
</s-drawer>
</s-drawer>
</div>
</template>
<script>
export default {
data() {
return {
outerDrawerVisible: false,
innerDrawerVisible: false
};
}
}
</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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25