DropdownList 下拉菜单

概述

DropdownList 下拉菜单，用于弹出一个菜单给用户选择操作，居中弹出。

支持平台

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

温馨提示

一般来说我们会通过 z-index + position 来进行层级的设置，但是 weex （Nvue）不支持 z-index 设置层级关系，默认越靠后的元素层级越高。

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiDropdownList from "@/components/firstui/fui-dropdown-list/fui-dropdown-list.vue"
export default {
	components:{
		fuiDropdownList
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。

基础使用

通过 options 属性设置下拉菜单数据。

通过 ref 来注册组件引用信息。通过 this.$refs.xxx 访问到对应的组件实例，并调用上面的实例方法 show 来显示下拉菜单。

<fui-dropdown-list :options="options" ref="ddlAssets" @click="assetsItemClick" @close="assetsClose"></fui-dropdown-list>

data() {
	return {
		options: [{
			text: '机架式服务器',
			value: 1
		}, {
			text: '笔记本',
			value: 2
		}, {
			text: '平板电脑',
			value: 3
		}, {
			text: '台式机+显示器',
			value: 3
		}],
		assets: '',
		assetsShow: false
	}
},
methods: {
	//显示下拉菜单
	assetsTap() {
		this.$refs.ddlAssets.show()
		this.assetsShow = true;
	},
	assetsItemClick(e) {
		console.log(e)
		this.assets = e.text
		this.assetsClose()
	},
	assetsClose() {
		this.assetsShow = false;
	}
}

固定高度、宽度 / 可滚动

通过 height 属性设置下拉菜单高度，width 属性设置下拉菜单宽度，checkboxColor 属性设置选择框选中后颜色，options 属性设置下拉菜单数据。

通过 ref 来注册组件引用信息。通过 this.$refs.xxx 访问到对应的组件实例，并调用上面的实例方法 show 来显示下拉菜单。

<fui-dropdown-list :height="600" :width="480" checkboxColor="#FFB703" :options="options" ref="ddlQues" @click="quesItemClick" @close="quesClose"></fui-dropdown-list>

data() {
	return {
		options: ['注册激活', '站长工具', '投递文章', '媒体合作', '素材相关', '报告错误', '论坛事务', '发布软件', '网站排行榜', '其他事务'],
		question: '',
		quesShow: false
	}
},
methods: {
	//显示下拉菜单
	quesTap() {
		this.$refs.ddlQues.show()
		this.quesShow = true;
	},
	quesItemClick(e) {
		console.log(e)
		this.question = e.text
		this.quesClose()
	},
	quesClose() {
		this.quesShow = false;
	}
}

Slots

插槽名称	说明
default V2.4.0+	自定义item项（下拉菜单）内容

Props

属性名	类型	说明	默认值	平台差异说明
options	Array	下拉菜单数据，格式见下方说明	[ ]	-
textKey V2.4.0+	String	options数据中 text 值指定的key	text	-
srcKey V2.4.0+	String	options数据中 src 值指定的key	src	-
checkedKey V2.4.0+	String	options数据中 checked 值指定的key	checked	-
height	Number, String	下拉菜单高度，单位rpx。大于0时生效	0	-
width	Number, String	下拉菜单宽度，单位rpx。大于0时生效	0	-
background	String	下拉菜单背景颜色	#fff	-
radius	Number, String	下拉菜单圆角值，部分平台若无效果则忽略该属性	0	-
padding	Array	下拉菜单item项padding值。[上, 右，下，左]	['32rpx', '32rpx']	-
isCheckbox	Boolean	是否显示选择框	true	-
checkboxColor	String	选择框选中后颜色	#465CFF	非Nvue端默认为空值，可通过css变量 ( --fui-color-primary ) 修改颜色值
borderColor	String	选择框未选中时边框颜色	#ccc	-
isCheckMark	Boolean	选择框是否只显示对号，无边框背景	false	-
checkmarkColor	String	选择框对号颜色	#fff	-
isReverse	Boolean	选择框与内容是否颠倒排列	false	-
splitLine	Boolean	下拉菜单每项间是否需要分割线	false	-
lineColor	String	分割线颜色	#eee	仅Nvue端有效，非Nvue端通过css变量 ( --fui-color-border ) 修改颜色值
iconWidth	Number, String	下拉菜单icon宽度，单位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	下拉菜单层级z-index值	1001	Nvue端不支持，默认越靠后的元素层级越高，即将组件放置最底部

//options 数据格式说明

//数据格式一，字符串数组
options: ['最新车讯', '降价排行', 'SUV', '违章罚单', '提车试驾', '测评体验', '选车指南', '美女车模', '加油优惠卡', '维修保养']

//数据格式二，以下为约定属性，其他属性可自行增加
options: [{
	//下拉菜单item项显示文本，可使用 textKey 属性指定key，必选
	text: '综合推荐',
	//下拉菜单item项文本对应value值，key可自定义任意值，可选
	value: 1,
	//下拉菜单item项icon图片地址，可使用 srcKey 属性指定key，可选
	src:'',
	//是否选中，可使用 checkedKey 属性指定key，可选
	checked: false
}]

Events

事件名	说明	回调参数
@click	点击下拉菜单item项时触发	{   index:item项索引,   ...this.options[index] }
@close	点击遮罩层时触发	-

Methods

通过 ref 来注册组件引用信息，引用信息将会注册在父组件的$refs对象上。

方法名	说明	传入参数
show	显示下拉菜单	-

示例预览

示例代码地址

DropdownList 下拉菜单