# bz-dropdown 下拉框
# 基本用法
用于弹出一个下拉菜单给用户选择操作，也可以自定义下拉元素内容（v-slot:content）
扫码预览
用BoosHi扫码或PC端点击
<template>
<view class="demo-ui-page">
<view class="demo-content">
<view class="demo-title">bz-dropdown 下拉框</view>
<view class="demo-padding-wrap">当前选择值： {{ value }}</view>
<demo-cell TBPadding="0">
<view class="demo-flex-between">
<bz-dropdown
placement="bottomLeft"
showArrow
v-model="value"
:options="params.options"
width="240px"
>
<bz-button>bottomLeft</bz-button>
</bz-dropdown>
<bz-dropdown
placement="bottom"
showArrow
v-model="value"
:options="params.options"
width="240px"
>
<bz-button>bottom</bz-button>
</bz-dropdown>
<bz-dropdown
placement="bottomRight"
showArrow
v-model="value"
:options="params.options"
width="240px"
>
<bz-button>bottomRight</bz-button>
</bz-dropdown>
</view>
</demo-cell>
<demo-cell
title="自定义元素"
subTitle="v-slot:content"
TBPadding="0"
>
<view class="demo-flex-between">
<bz-dropdown
placement="topLeft"
showArrow
>
<bz-button>topLeft</bz-button>
<template v-slot:content>
<view style="padding: 20px; width: 200px">自定义下拉内容</view>
</template>
</bz-dropdown>
<bz-dropdown
placement="top"
showArrow
v-model="value"
:options="params.options"
:width="params.width"
>
<bz-button>top</bz-button>
<template v-slot:content>
<view style="padding: 10px; width: 200px">结合 options 使用</view>
</template>
</bz-dropdown>
<bz-dropdown placement="topRight">
<bz-button>topRight</bz-button>
<template v-slot:content>
<view style="padding: 20px; width: 200px">自定义下拉内容；不展示箭头</view>
</template>
</bz-dropdown>
</view>
</demo-cell>
<demo-cell
title="不需要边框"
subTitle="noBorder"
TBPadding="0"
>
<view class="demo-flex-between">
<bz-dropdown
placement="rightTop"
showArrow
noBorder
v-model="value"
:options="params.options"
width="120px"
>
<bz-button>rightTop</bz-button>
</bz-dropdown>
<bz-dropdown
placement="leftTop"
showArrow
noBorder
v-model="value"
:options="params.options"
width="120px"
>
<bz-button>leftTop</bz-button>
</bz-dropdown>
</view>
<br />
<view class="demo-flex-between">
<bz-dropdown
placement="right"
showArrow
noBorder
v-model="value"
:options="params.options"
width="120px"
>
<bz-button>right</bz-button>
</bz-dropdown>
<bz-dropdown
placement="left"
showArrow
noBorder
v-model="value"
:options="params.options"
width="120px"
>
<bz-button>left</bz-button>
</bz-dropdown>
</view>
<br />
<view class="demo-flex-between">
<bz-dropdown
placement="rightBottom"
showArrow
noBorder
v-model="value"
:options="params.options"
width="120px"
>
<bz-button>rightBottom</bz-button>
</bz-dropdown>
<bz-dropdown
placement="leftBottom"
showArrow
noBorder
v-model="value"
:options="params.options"
width="120px"
>
<bz-button>leftBottom</bz-button>
</bz-dropdown>
</view>
</demo-cell>
</view>
</view>
</template>
<script>
export default {
data() {
return {
value: '',
params: {
width: '280px',
placement: 'bottomLeft',
color: '#5358de',
bgColor: '#fff',
showArrow: true,
noBorder: true,
disabled: false,
borderRadius: '4px',
options: [
{ value: 0, label: '篮球' },
{ value: 1, label: '足球' },
{ value: 2, label: '游泳', disabled: true },
{ value: 3, label: '赛跑' }
]
}
}
}
}
</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
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
展开 刷新 关闭
# 属性说明
| 属性名 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| color | String | 主题颜色 | #1890ff |
| value(v-model) | String ｜ Number | 下拉菜单的选择值 | - |
| options | { label: String, value: String ｜ Number, disabled: Boolean }[] | 菜单列表结构 | - |
| width | String | 自定义宽度, 默认跟随宿主的宽度 | - |
| placement | 详见下方 | 下拉位置 | bottomLeft |
| showArrow | Boolean | 展示箭头 | - |
bgColor 1.0.1 | string | 自定义下拉框背景色 | #fff |
borderRadius 1.0.1 | string | 自定义边框圆角 | 4px |
noBorder 1.0.1 | Boolean | 下拉框没有边框 | false |
disabled 1.0.1 | Boolean | 禁用 | false |
| @change | (value: String ｜ Number) => void | 选中状态改变时触发事件 | - |
| @visibleChange | (visible: boolean) => void | 显示隐藏状态改变时触发事件 | - |
- placement 取值
| 版本 | 类型 |
|---|---|
| 1.0.1 及以上版本 | top, topLeft, topRight, bottom, bottomLeft, bottomRight, left, leftTop, leftBottom, right, rightTop, rightBottom |
| 1.0.1-7 及以下版本 | bottomLeft, bottomRight, topLeft, topRight |