DropdownMenu 下拉菜单

为触发区域显示可定位的下拉选项，可自定义选项内容。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓（V1.5.0+）	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 点击时显示菜单 -->
<fui-dropdown-menu ref="menuRef" :options="options" @click="handleOption">
  <button @click="showMenu">打开菜单</button>
</fui-dropdown-menu>

页面的 showMenu 可调用 this.$refs.menuRef.show()；options 项使用 text、src、checked 等字段。

属性

属性	类型	说明	官网默认值
options	Array	选项数据	[]
textKey / srcKey / checkedKey	String	文字、图片、选中状态字段	text / src / checked
maxHeight	Number / String	最大高度，单位 rpx；nvue 为实际高度	400
minWidth	Number / String	最小宽度，单位 rpx	0
left	Number / String	左偏移，单位 rpx	0
right	Number / String	右偏移，非负时优先于 left，单位 rpx	-1
background	String	菜单背景色	#fff
radius	Number / String	圆角，单位 rpx	0
padding	String	选项内边距	32rpx
isCheckbox	Boolean	是否显示选择框	true
checkboxColor	String	选中颜色	#465CFF
borderColor	String	未选中边框颜色	#ccc
isCheckMark	Boolean	是否只显示对勾	false
checkmarkColor	String	对勾颜色	#fff
isReverse	Boolean	是否颠倒选择框与内容位置	false
splitLine	Boolean	是否显示项间分隔线	false
lineColor	String	分隔线颜色	#eee
iconWidth	Number / String	图片图标宽高，单位 rpx	48
size	Number / String	文字大小，单位 rpx	32
color	String	文字颜色	#181818
selectedColor	String	选中文字颜色	-
isMask	Boolean	是否显示遮罩	true
maskBackground	String	遮罩背景色	transparent
direction	String	展开方向：down、up	down

事件

事件	说明	回调参数
click	点击下拉选项	包含 index 和当前选项字段的对象
close	点击遮罩	{}

实例的 show() 用于显示菜单；非 nvue 默认主色和边框颜色由主题变量控制。

插槽

插槽	说明
default	用于触发下拉菜单的内容
item	自定义项目内容