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

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

表单组件

下拉项子组件 TmDropdownItem

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

🌶️ 示例

查看模拟效果－

示例模板

<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
☑️	☑️	☑️	☑️

🌱 参数

参数名	类型	默认值	描述
title	string	'标题'	菜单标题
keyName	union	''	标识，变换或者点击时，会通过事件传回。不要与其它选项相同，必须是唯一
icon	string	'arrow-down-s-fill'	未选中时的图标
activeIcon	string	'arrow-up-s-fill'	激活时的图标
fontColor	string	'#333333'	默认的文字及图标颜色
darkFontColor	string	''	暗黑时的默认的文字及图标颜色，空取时白色
fontSize	string	'28'	文字及图标大小
activeFontColor	string	''	激活的文字及图标颜色空值时取全局统一的主题色。
isBtn	boolean	false	是否是按钮选项。
color	-	'white'	-
darkColor	-	''	-
render	-	false	-

🌹 事件

事件名	参数	返回数据	描述

🌽 slot插槽

插槽名	数据	描述
default	-	-
footer	-	-

🥗 ref方法

方法名	参数	返回值	描述