FirstUI UNI（选项式API）版

# DropdownMenu 下拉菜单

概述

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

# 支持平台

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

# 引入

以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiDropdownMenu from "@/components/firstui/fui-dropdown-menu/fui-dropdown-menu.vue"
export default {
	components:{
		fuiDropdownMenu
	}
}
1
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

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

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

# 代码演示

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

通过 size 属性设置下拉菜单字体大小，selectedColor 属性设置下拉菜单字体选中后颜色，options 属性设置下拉菜单数据。

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

注意：页面上用于点击显示下拉菜单的布局内容放置于组件内部。如下所示：
<fui-dropdown-menu :size="28" selectedColor="#465CFF" :options="options" @click="rangeItemClick" @close="rangeClose" ref="ddmRange">
	<view class="fui-filter__item" @tap="filterTap">
		<text>{{range}}</text>
		<view class="fui-filter__icon" :class="{'fui-icon__ani':rangeShow}">
			<fui-icon name="turningdown" :size="32"></fui-icon>
		</view>
	</view>
</fui-dropdown-menu>
1
2
3
4
5
6
7
8
data() {
	return {
		options: [{
			text: '综合推荐',
			value: 1,
			checked: true
		}, {
			text: '新品优先',
			value: 2
		}, {
			text: '评论数从高到低',
			value: 3
		}],
		range: '综合推荐',
		rangeShow: false
	}
},
methods: {
	filterTap() {
		//显示下拉框
		this.$refs.ddmRange.show()
		this.rangeShow = true;
	},
	rangeItemClick(e) {
		console.log(e)
		this.range = e.text
		this.rangeClose()
	},
	rangeClose() {
		this.rangeShow = 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
.fui-filter__item {
	width: 300rpx;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
	background-color: #fff;
}

.fui-filter__icon {
	transition: all .15s linear;
}

.fui-icon__ani {
	transform: rotate(180deg);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
向上展开、不显示选择框

通过 isCheckbox 属性控制是否显示选择框，selectedColor 属性设置下拉菜单字体选中后颜色，splitLine 属性设置每项间是否显示分割线，options 属性设置下拉菜单数据，direction 属性设置下拉菜单展开方向。

<fui-list-cell :highlight="false">
	<view class="fui-list__cell fui-flex__center">
		<text>选择标签：</text>
		<fui-dropdown-menu :isCheckbox="false" selectedColor="#FF2B2B" splitLine :options="options"
			ref="ddmTag" direction="up" @click="tagItemClick" @close="tagClose">
			<view class="fui-select fui-flex__between" @tap="tagTap">
				<text>{{tag}}</text>
				<view class="fui-filter__icon" :class="{'fui-icon__ani':tagShow}">
					<fui-icon name="turningdown" :size="32"></fui-icon>
				</view>
			</view>
		</fui-dropdown-menu>
	</view>
</fui-list-cell>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
data() {
	return {
		options: ['最新车讯', '降价排行', 'SUV', '违章罚单', '提车试驾', '测评体验', '选车指南', '美女车模', '加油优惠卡', '维修保养'],
		tag: '请选择',
		tagShow: false
	}
},
methods: {
	tagTap() {
		this.$refs.ddmTag.show()
		this.tagShow = true;
	},
	tagItemClick(e) {
		console.log(e)
		this.tag = e.text
		this.tagClose()
	},
	tagClose() {
		this.tagShow = false;
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.fui-filter__icon {
	transition: all .15s linear;
}

.fui-icon__ani {
	transform: rotate(180deg);
}

.fui-list__cell {
	width: 100%;
}

.fui-select {
	flex: 1;
	height: 80rpx;
	padding: 32rpx;
	box-sizing: border-box;
	position: relative;
}

.fui-select::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 200%;
	height: 200%;
	border: 1px solid #eee;
	transform: scale(.5);
	transform-origin: 0 0;
	pointer-events: none;
}
.fui-flex__center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.fui-flex__between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
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

# Slots

插槽名称 说明
default 点击显示下拉菜单的布局内容

# Props

属性名 类型 说明 默认值 平台差异说明
options Array 下拉菜单数据，格式见下方说明 [ ] -
maxHeight Number, String 下拉菜单最大高度，单位rpx 400 nvue端此参数为实际高度height值
minWidth Number, String 下拉菜单最小宽度，单位rpx 0 -
left Number, String 下拉菜单left值，单位rpx 0 -
right Number, String 下拉菜单right值，单位rpx。right大于等于0时生效，且left失效 -1 -
background String 下拉菜单背景颜色 #fff -
radius Number, String 下拉菜单圆角值，部分平台若无效果则忽略该属性 0 -
padding String 下拉菜单item项padding值 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 V1.5.0+ String 分割线颜色 #eee 仅nvue端支持，非nvue端使用css变量（--fui-color-border）修改颜色值
iconWidth Number, String 下拉菜单icon宽度，单位rpx。高度与宽度等长 48 -
size Number, String 下拉菜单字体大小，单位rpx 32 -
color String 下拉菜单字体颜色 #181818 -
selectedColor String 下拉菜单字体选中后颜色 - -
isMask Boolean 是否需要遮罩层 true -
maskBackground String 遮罩层背景色 transparent -
direction String 下拉菜单展开方向，可选值：down、up down -
//options 数据格式说明

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

//数据格式二，以下为约定属性，其他属性可自行增加
options: [{
	//下拉菜单item项显示文本，必选
	text: '综合推荐',
	//下拉菜单item项文本对应value值，可选
	value: 1,
	//下拉菜单item项icon图片地址，可选
	src:'',
	//是否选中，可选
	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 显示下拉菜单 -

示例预览

# 示例代码地址

FirstUIDropdownMenu 下拉菜单
Last Updated: 1/23/2024, 3:29:03 PM

← DropdownList 下拉菜单 →