FirstUI UNIX版

# DropdownMenu 下拉菜单 V1.1.0+

概述

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

温馨提示

  • 使用该组件 需要 同时引入 fui-types 类型文件。

# 支持平台

目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。

安卓系统版本 安卓uni-app 安卓uniapp-x iOS系统版本 iOS uniapp iOS uniapp-x 小程序 H5/Web
5.0 × ✓ 9.0 × × × ✓

# 引入

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

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

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

# 代码演示

部分示例演示，完整使用请参考示例程序以及文档API。
基础使用

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

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

注意：页面上用于点击显示下拉菜单的布局内容放置于组件内部。如下所示：
<fui-dropdown-menu :maxHeight="324" :size="28" selectedColor="#465CFF" :menus="menus"
	@onclick="rangeItemClick" @close="rangeClose" ref="ddmRange">
	<view class="fui-filter__item" @tap="filterTap">
		<text class="fui-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
9
import { FuiDropdownMenuOptionParam } from '@/components/firstui/fui-types/index.uts';
export default {
	data() {
		return {
			menus: [{
				text: '综合推荐',
				value: '1',
				checked: true
			}, {
				text: '新品优先',
				value: '2'
			}, {
				text: '评论数从高到低',
				value: '3'
			}] as FuiDropdownMenuOptionParam[],
			range: '综合推荐',
			rangeShow: false
		}
	},
	methods: {
		filterTap() {
			(this.$refs['ddmRange'] as FuiDropdownMenuComponentPublicInstance).show()
			this.rangeShow = true;
		},
		rangeItemClick(e : FuiDropdownMenuOptionParam) {
			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
34
.fui-filter__item {
	height: 88rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.fui-filter__icon {
	transition-property: transform;
	transition-duration: .15s;
	transition-timing-function: linear;
	transform: rotate(0deg);
}

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

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

<fui-list-cell :highlight="false">
	<view class="fui-list__cell fui-flex__center">
		<text class="fui-text">选择标签：</text>
		<view class="fui-flex__1">
			<fui-dropdown-menu :isCheckbox="false" selectedColor="#FF2B2B" :splitLine="true"
				:menus="menus3" ref="ddmTag" direction="up" @onclick="tagItemClick" @close="tagClose">
				<view class="fui-select fui-flex__between" @tap="tagTap">
					<input placeholder="请选择" :value="tag" class="fui-input" :disabled="true" />
					<view class="fui-filter__icon" :class="{'fui-icon__ani':tagShow}">
						<fui-icon name="turningdown" :size="32"></fui-icon>
					</view>
				</view>
			</fui-dropdown-menu>
		</view>
	</view>
</fui-list-cell>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { FuiDropdownMenuOptionParam } from '@/components/firstui/fui-types/index.uts';
export default {
	data() {
		return {
			menus3: [{
				text: '最新车讯'
			}, {
				text: '降价排行'
			}, {
				text: 'SUV'
			}, {
				text: '违章罚单'
			}, {
				text: '提车试驾'
			}, {
				text: '测评体验'
			}, {
				text: '选车指南'
			}, {
				text: '美女车模'
			}, {
				text: '加油优惠卡'
			}, {
				text: '维修保养'
			}] as FuiDropdownMenuOptionParam[],
			tag: '',
			tagShow: false
		}
	},
	methods: {
		tagTap() {
			(this.$refs['ddmTag'] as FuiDropdownMenuComponentPublicInstance).show()
			this.tagShow = true;
		},
		tagItemClick(e : FuiDropdownMenuOptionParam) {
			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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.fui-filter__icon {
	transition-property: transform;
	transition-duration: .15s;
	transition-timing-function: linear;
	transform: rotate(0deg);
}

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

.fui-list__cell,
.fui-flex__1 {
	flex: 1;
}

.fui-select {
	position: relative;
	height: 80rpx;
	padding: 32rpx;
	box-sizing: border-box;
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.fui-select {
	border: 0.5px solid #eee;
}

.fui-input {
	font-size: 30rpx;
	flex: 1;
	padding-right: 8rpx;
	color: #181818;
	pointer-events: none;
}

.fui-text {
	font-size: 30rpx;
}
.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
44
45
46
47
48
49
50
51
52
53

# Slots

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

# Props

属性名 类型 说明 默认值 平台差异说明
menus Array<FuiDropdownMenuOptionParam> 下拉菜单数据 [ ] -
maxHeight Number 下拉菜单最大高度，单位rpx 400 -
minWidth Number 下拉菜单最小宽度，单位rpx 0 -
left Number 下拉菜单left值，单位rpx 0 -
right Number 下拉菜单right值，单位rpx。right大于等于0时生效，且left失效 -1 -
background String 下拉菜单背景颜色 #fff -
radius Number 下拉菜单圆角值，部分平台若无效果则忽略该属性 0 -
padding String 下拉菜单item项padding值 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 下拉菜单icon宽度，单位rpx。高度与宽度等长 48 -
size Number 下拉菜单字体大小，单位rpx 32 -
color String 下拉菜单字体颜色 #181818 -
selectedColor String 下拉菜单字体选中后颜色 - -
maskBackground String 遮罩层背景色 transparent -
direction String 下拉菜单展开方向，可选值：down、up down -
zIndex Number 层级z-index值 990 -

# FuiDropdownMenuOptionParam

/**
* fui-dropdown-menu 下拉菜单 组件 menus属性 参数类型
* @description DropdownMenu 下拉菜单组件 menus属性 参数类型
* @param {string} text {string} 下拉菜单item项显示文本，必选
* @param {string} value {string} 下拉菜单item项文本对应value值，可选
* @param {string} src {string} 下拉菜单item项icon图片地址，可选
* @param {boolean} checked {boolean} 是否选中，可选
* @param {boolean} disabled {boolean} 是否禁用选择，可选
* @param {string} param {string} 自定义参数，可选
* @param {number} index {number} 索引值，点击菜单时内部返回，无需传值
*/
export type FuiDropdownMenuOptionParam = {
	text : string;
	value ?: string;
	src ?: string;
	checked ?: boolean;
	disabled ?: boolean;
	param ?: string;
	index ?: number;
}

/*页面引入*/
import { FuiDropdownMenuOptionParam } from '@/components/firstui/fui-types/index.uts';
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# Events

事件名 类型 说明 回调参数
@onclick (event: FuiDropdownMenuOptionParam) => void 点击下拉菜单item项时触发 FuiDropdownMenuOptionParam
@close () => void 点击遮罩层时触发 -

# FuiDropdownMenuOptionParam

同上

# Methods

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

示例预览

# 示例代码地址

FirstUIDropdownMenu 下拉菜单
Last Updated: 1/29/2024, 6:27:37 PM

← DropdownList 下拉菜单 →