# bz-drawer 抽屉
# 基本用法
支持从上、下、左、右以及中心位置弹出抽屉面板，类似 Popup 弹出层能力
扫码预览
用BoosHi扫码或PC端点击
<template>
<view class="demo-ui-page">
<view class="demo-content">
<view class="demo-title">bz-drawer 抽屉</view>
<demo-cell TBPadding="0">
<bz-button @click="visible1 = true">触发抽屉</bz-button>
<bz-drawer
v-model="visible1"
size="220px"
appendRoot
>默认右边弹出</bz-drawer
>
</demo-cell>
<demo-cell
title="自定义弹窗方向/高度"
subTitle="placement size"
TBPadding="0"
>
<bz-button
class="mr-10"
@click="visible2 = true"
>下方弹出</bz-button
>
<bz-drawer
v-model="visible2"
placement="bottom"
size="220px"
>抽屉内容</bz-drawer
>
<bz-button
class="mr-10"
@click="visible3 = true"
>左方弹出</bz-button
>
<bz-drawer
v-model="visible3"
placement="left"
size="220px"
appendRoot
>抽屉内容</bz-drawer
>
<bz-button @click="visible5 = true">中间弹出</bz-button>
<bz-drawer
v-model="visible5"
placement="center"
size="220px"
closeable
round
appendRoot
>
<view class="demo-drawer-content">
中间内容
<br />
中间内容
</view>
</bz-drawer>
</demo-cell>
</view>
</view>
</template>
<script>
export default {
data() {
return {
visible1: false,
visible2: false,
visible3: false,
visible4: false,
visible5: false
}
},
methods: {
onShowDrawer() {
this.visible = true
},
onClose(vis) {
console.log('===关闭抽屉', vis)
}
}
}
</script>
<style lang="scss" scoped>
.demo-drawer-content {
padding: 12px 16px;
}
</style>
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
展开 刷新 关闭
# 属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| visible(v-model) | Boolean | false | （展开/关闭）状态 |
| placement | 'top', 'right', 'bottom', 'left' | 'right' | 抽屉弹出位置方向, 1.0.1 新增方向 'center' |
| size | String | '248px' | 抽屉的宽度/高度 1.0.1 改默认值为 'auto' |
round 1.0.1 | Boolean | false | 抽屉窗口是否圆角 |
closeable 1.0.1 | Boolean | false | 是否展示关闭按钮 |
transparentMask 1.0.1 | Boolean | false | 透明遮罩 |
appendRoot 1.0.1 | Boolean | false | 是否挂载到根节点，解决 fixed 元素会受父级影响的场景 |
overlay 1.0.2 | Boolean | true | 是否展示遮罩层 |
closeOnClickOverlay 1.0.2 | Boolean | true | 点击遮罩层是否关闭弹窗 |
| @onClose | Handler | - | 关闭抽屉时的回调 |