FirstUI UNIX版

# DropdownList 下拉菜单 V1.1.0+

概述

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

温馨提示

  • 使用该组件 需要 同时引入 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 fuiDropdownList from "@/components/firstui/fui-dropdown-list/fui-dropdown-list.uvue"
export default {
	components:{
		fuiDropdownList
	}
}
1
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

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

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

# 代码演示

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

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

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

<fui-list-cell :highlight="false">
	<view class="fui-list__cell fui-flex__center">
		<text class="fui-text">资产类别：</text>
		<view class="fui-select fui-flex__between" @tap="assetsTap">
			<input placeholder="请选择" :value="assets" class="fui-input" :disabled="true" />
			<view class="fui-filter__icon" :class="{'fui-icon__ani':assetsShow}">
				<fui-icon name="turningdown" :size="32"></fui-icon>
			</view>
		</view>
	</view>
</fui-list-cell>
<fui-dropdown-list :menus="menus" ref="ddlAssets" @onclick="assetsItemClick" @close="assetsClose">
</fui-dropdown-list>
1
2
3
4
5
6
7
8
9
10
11
12
13
import { FuiDropdownMenuOptionParam } from '@/components/firstui/fui-types/index.uts';
export default {
	data() {
		return {
			menus: [{
				text: '机架式服务器',
				value: '1'
			}, {
				text: '笔记本',
				value:'2'
			}, {
				text: '平板电脑',
				value: '3'
			}, {
				text: '台式机+显示器',
				value: '3'
			}] as FuiDropdownMenuOptionParam[],
			assets: '',
			assetsShow: false
		}
	},
	methods: {
		assetsTap() {
			(this.$refs['ddlAssets'] as FuiDropdownListComponentPublicInstance).show()
			this.assetsShow = true;
		},
		assetsItemClick(e : FuiDropdownMenuOptionParam) {
			console.log(JSON.stringify(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
36
.fui-flex__center {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.fui-section__title {
	margin-left: 32rpx;
}


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

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

.fui-list__cell {
	flex: 1;
}

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

.fui-input {
	font-size: 32rpx;
	flex: 1;
	padding-right: 8rpx;
	pointer-events: none;
}

.fui-select {
	border: 0.5px solid #eee;
}
.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
固定高度、宽度 / 可滚动

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

<fui-list-cell :highlight="false">
	<view class="fui-list__cell fui-flex__center">
		<text class="fui-text">问题分类：</text>
		<view class="fui-select fui-flex__between" @tap="quesTap">
			<input placeholder="请选择" :value="question" class="fui-input" :disabled="true" />
			<view class="fui-filter__icon" :class="{'fui-icon__ani':quesShow}">
				<fui-icon name="turningdown" :size="32"></fui-icon>
			</view>
		</view>
	</view>
</fui-list-cell>
<fui-dropdown-list :height="600" :width="480" checkboxColor="#FFB703" :menus="menus2" ref="ddlQues"
	@onclick="quesItemClick" @close="quesClose"></fui-dropdown-list>
1
2
3
4
5
6
7
8
9
10
11
12
13
import { FuiDropdownMenuOptionParam } from '@/components/firstui/fui-types/index.uts';
export default {
	data() {
		return {
			menus2: [{
				text: '注册激活'
			}, {
				text: '站长工具'
			}, {
				text: '投递文章'
			}, {
				text: '媒体合作'
			}, {
				text: '素材相关'
			}, {
				text: '报告错误'
			}, {
				text: '论坛事务'
			}, {
				text: '发布软件'
			}, {
				text: '网站排行榜'
			}, {
				text: '其他事务'
			}] as FuiDropdownMenuOptionParam[],
			question: '',
			quesShow: false
		}
	},
	methods: {
		quesTap() {
			(this.$refs['ddlQues'] as FuiDropdownListComponentPublicInstance).show()
			this.quesShow = true;
		},
		quesItemClick(e : FuiDropdownMenuOptionParam) {
			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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.fui-flex__center {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.fui-section__title {
	margin-left: 32rpx;
}


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

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

.fui-list__cell {
	flex: 1;
}

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

.fui-input {
	font-size: 32rpx;
	flex: 1;
	padding-right: 8rpx;
	pointer-events: none;
}

.fui-select {
	border: 0.5px solid #eee;
}
.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

插槽名称 说明
- -

# Props

属性名 类型 说明 默认值 平台差异说明
menus Array<FuiDropdownMenuOptionParam> 下拉菜单数据，格式见下方说明 [ ] -
height Number 下拉菜单高度，单位rpx。大于0时生效 0 -
width Number 下拉菜单宽度，单位rpx。大于0时生效 0 -
background String 下拉菜单背景颜色 #fff -
radius Number 下拉菜单圆角值，部分平台若无效果则忽略该属性 0 -
padding String 下拉菜单item项padding值，格式同css 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 下拉菜单icon宽度，单位rpx。高度与宽度等长 48 -
size Number 下拉菜单字体大小，单位rpx 32 -
color String 下拉菜单字体颜色 #181818 -
selectedColor String 下拉菜单字体选中后颜色 - -
maskClosable Boolean 点击下拉菜单遮罩是否可关闭下拉菜单 true -
maskBackground String 下拉菜单遮罩背景色 rgba(0, 0, 0, 0.6) -
zIndex Number 下拉菜单层级z-index值 1001 -

# 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

← Modal 模态框 →