# 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
	}
}
1
2
3
4
5
6
第二种: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>
1
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;
	}
}

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
固定高度、宽度 / 可滚动

通过 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>
1
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;
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 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
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# Events

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

# Methods

通过 ref 来注册组件引用信息,引用信息将会注册在父组件的$refs对象上。
方法名 说明 传入参数
show 显示下拉菜单 -

示例预览

# 示例代码地址

FirstUIDropdownList 下拉菜单
Last Updated: 6/10/2024, 1:35:08 PM