你当前查看的文档是tmui3.2.0（已不再支持NVUE）

[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

反馈组件

下拉菜单 TmDropdownMenu

下拉菜单组件，用于下拉菜单中展示选项。

🌶️ 示例

查看模拟效果－

示例模板

<template>
	<view>
		<tm-sheet>
			<tm-text font-size="36" class="text-weight-b mb-16 d-block">下拉菜单 tmDropdownMenu</tm-text>
			<view>
				<tm-text>支持静态与悬浮，支持嵌套在其它组件中使用时可定位内容宽。</tm-text>
			</view>
		</tm-sheet>
		<view style="margin: 20rpx 20rpx;">
			<tm-dropdown-menu :hidnMask="true" round="24">
				<tm-dropdown-item title="按距离" key-name="1">
					<tm-text>这里由用户自由布局内容，实现逻辑。</tm-text>
				</tm-dropdown-item>
				<tm-dropdown-item title="综合条件" key-name="2">
					<tm-text>你还可以实现更多更复杂的功能.</tm-text>
				</tm-dropdown-item>
				<tm-dropdown-item title="所有项目" key-name="3">
					<view style="height: 100px;">
						<tm-text>完全插槽实现灵活度极高。</tm-text>
					</view>
				</tm-dropdown-item>
				<tm-dropdown-item title="按价格" icon="radio-button-line" activeIcon="radio-button-fill" key-name="4" :is-btn="true"></tm-dropdown-item>
			</tm-dropdown-menu>
		</view>

		<tm-sheet>
			<tm-text font-size="36" class="text-weight-b d-block">显示背景,自动悬浮顶部</tm-text>
		</tm-sheet>
		<view style="margin: 20rpx 0;">
			<tm-dropdown-menu v-model="active" position="fixed">
				<tm-dropdown-item title="按距离" key-name="1">
					<tm-text>这里由用户自由布局内容，实现逻辑。</tm-text>
				</tm-dropdown-item>
				<tm-dropdown-item title="综合条件" key-name="2">
					<tm-text>你还可以实现更多更复杂的功能.</tm-text>
				</tm-dropdown-item>
				<tm-dropdown-item title="项目" key-name="3">
					<view style="height: 100px;">
						<tm-text>完全插槽实现灵活度极高。</tm-text>
					</view>
				</tm-dropdown-item>
				<tm-dropdown-item title="滚动" key-name="4" icon="sun-line" activeIcon="sun-fill">
					<view style="max-height: 300px;overflow-y: scroll;">
						<tm-text>完全插槽实现灵活度极高。</tm-text>
						<view style="height: 500px;"></view>
					</view>
				</tm-dropdown-item>
			</tm-dropdown-menu>
		</view>
		<tm-sheet>
			<tm-button @click="active='3'" block>手动切换</tm-button>
		</tm-sheet>
	</view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const active = ref('')
</script>
<style lang="scss"></style>

🌶️ 兼容性

平台兼容

H5	uniAPP	小程序	version
☑️	☑️	☑️	☑️

🌱 参数

参数名	类型	默认值	描述
position	TmDropdownMenuPropsPositions	'static'	展现方式。static静态fixed展开后悬浮在顶部。
offsetTop	string	'0'	顶部的偏移量,如果你要让出顶部距离可以设置此值。数字字符，prx,px等单位如果position=static此属性失效。
modelValue	union	-1	当前激活的索引标识，就是你子项上的keyName值匹配不到时关闭。所以要关闭，只要填充一个不存在的keyName值即可。
height	string	'88'	菜单栏的高度
width	string	'auto'	宽度
color	string	'white'	背景颜色
darkColor	string	''	暗黑时的背景颜色
zIndex	number	88	层级
hidnMask	boolean	false	对于要把此组件嵌套在布局组件时，应该要隐藏遮罩，否则不好看。
contentColor	string	'#ffffff'	内容背景颜色
contentDarkColor	string	''	暗黑时的内容背景颜色,空值取sheetDarkColor
round	string	'0'	圆角值，要注意：开启后：菜单也会有圆角，但有区别：默认未展开时四周圆角。当展开时，内容底部圆角，菜单顶部圆角，这样形成上下一体的外观。
contentPadding	string	'0px12px12px12px'	内容样式padding,请使用css规则

🌹 事件

事件名	参数	返回数据	描述
change	名称：index,当前被切换的索引值,名称：keyName,菜单keyName标识,名称：status,当前切换的状态：false表示关闭，true表示打开。,	-	切换菜单时触发
update:modelValue	-	-	-

🌽 slot插槽

插槽名	数据	描述
default	-	-

🥗 ref方法

方法名	参数	返回值	描述
addChildren	-	-	-
removeChildren	-	-	-