DropdownList 下拉菜单

显示带遮罩的选择列表，通过实例方法打开。

支持平台

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

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 下拉选择列表 -->
<fui-dropdown-list ref="listRef" :options="options" @click="handleOption" />

页面可调用 this.$refs.listRef.show() 打开，选项对象默认使用 text、src、checked 字段。

属性

属性	类型	说明	官网默认值
options	Array	选项数据	[]
textKey / srcKey / checkedKey	String	文字、图片、选中状态字段	text / src / checked
height	Number / String	列表高度，大于 0 时生效，单位 rpx	0
width	Number / String	列表宽度，大于 0 时生效，单位 rpx	0
background	String	背景色	#fff
radius	Number / String	圆角，单位 rpx	0
padding	Array	选项内边距	['32rpx', '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	选中文字颜色	-
maskClosable	Boolean	点击遮罩是否关闭	true
maskBackground	String	遮罩颜色	rgba(0, 0, 0, 0.6)
zIndex	Number	层级，nvue 不支持	1001

事件

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

实例的 show() 用于打开列表；非 nvue 默认主色与边框色由主题变量控制。

插槽

插槽	说明
default	下拉列表中的自定义内容