Tui Plus Vapor

Appearance

# t-dropdown-menu

DropdownMenu 下拉菜单

t-dropdown-menu 组件介绍 ​

下拉菜单组件，用于页面的内容筛选、排序等操作，呈现数个并列的选项类目，支持展开/收起下拉面板。

t-dropdown-menu 平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

t-dropdown-menu 基础用法 ​

基础用法参考 demo/dropdown-menu/dropdown-menu.uvue，支持选项菜单与自定义插槽面板。

vue
<template>
	<t-page class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mb-15"
				title="DropdownMenu 下拉菜单"
				sub-title="菜单呈现数个并列的选项类目，用于页面的内容筛选、排序等操作。" />
		<t-section class="mb-15 r-10"
				   title="基础用法"></t-section>
		<t-dropdown-menu class="r-10 z-999"
						 :model="formData"
						 @select="onselect"
						 ref="dropdownins">
			<t-dropdown-item prop="goods"
							 :options="goodsOptions"></t-dropdown-item>
			<t-dropdown-item prop="sort"
							 :options="sortOptions"></t-dropdown-item>
			<t-dropdown-item prop="sort"
							 label="插槽">
				<view @touchstart.stop="()=>true">
					<t-card title="服务(多选)"
							class="pb-0">
						<t-checkbox-group v-model="(formData.server as string[])"
										  mode="button"
										  type="primary"
										  class="fl fww mt-10 fjcs"
										  child-class="mrb-15 w-70">
							<t-checkbox value="0">预定</t-checkbox>
							<t-checkbox value="1">点餐</t-checkbox>
							<t-checkbox value="2">外卖</t-checkbox>
							<t-checkbox value="3">wifi</t-checkbox>
							<t-checkbox value="4">停车位</t-checkbox>
							<t-checkbox value="5">包厢</t-checkbox>
							<t-checkbox value="6">无烟区</t-checkbox>
							<t-checkbox value="7">营业中</t-checkbox>
						</t-checkbox-group>
					</t-card>
					<t-card title="价格(单选)"
							class="pb-0">
						<t-radio-group v-model="(formData.price as string)"
									   mode="button"
									   type="primary"
									   class="fl fww mt-10 fjcb"
									   child-class="mb-15 w-90">
							<t-radio value="0">50以下</t-radio>
							<t-radio value="1">50-100</t-radio>
							<t-radio value="2">100-300</t-radio>
							<t-radio value="3">300以上</t-radio>
						</t-radio-group>
					</t-card>
					<t-card title="价格(区间)"
							class="">
						<t-row class="faic mt-10">
							<t-input class="f b-1px,s,#ebebeb"
									 size="small"
									 v-model="(formData.minPrice as string)"></t-input>
							<t-text class="mlr-10">至</t-text>
							<t-input class="f b-1px,s,#ebebeb"
									 size="small"
									 v-model="(formData.maxPrice as string)"></t-input>
						</t-row>
					</t-card>
					<t-row class="plrb-10 mt-10">
						<t-button class="f r-75 mr-15"
								  type="error"
								  effect="light"
								  @click="reset">重置</t-button>
						<t-button type="primary"
								  class="f r-75"
								  @click="select">确认</t-button>
					</t-row>
				</view>
			</t-dropdown-item>
		</t-dropdown-menu>
		<t-button type="primary">123132</t-button>
		<view class="h-1000"></view>
	</t-page>
</template>

<script setup>
	const dropdownins = ref<ComponentPublicInstance | null>(null)
	const formData = reactive<UTSJSONObject>({
		goods: '0',
		sort: 'b',
		filter: 'inStock',
		server: ['0'] as string[],
		price: '0',
		user: '2',
		minPrice: '',
		maxPrice: ''
	});

	const userOptions : UTSJSONObject[] = [
		{ label: '全部', value: 'all' },
		{ label: '普通会员', value: '1' },
		{ label: '金牌会员', value: '2' },
	];
	const goodsOptions : UTSJSONObject[] = [
		{ label: '全部商品', value: '0' },
		{ label: '新款商品', value: '1' },
		{ label: '活动商品', value: '2' },
	];

	const sortOptions : UTSJSONObject[] = [
		{ label: '默认排序', value: 'a' },
		{ label: '好评优先', value: 'b' },
		{ label: '销量最高', value: 'c', disabled: true },
		{ label: '价格最低', value: 'd' },
	];

	const filterOptions : UTSJSONObject[] = [
		{ label: '全部', value: 'all' },
		{ label: '有货优先', value: 'inStock' },
		{ label: '仅看有优惠', value: 'onSale' },
		{ label: '海淘商品', value: 'imported' },
	];
	function onselect(val : UTSJSONObject) {
		console.log(val)
	}
	function select() {
		dropdownins.value?.$callMethod('close')
	}
	function reset() {
		formData.server = ['0'] as string[]
		formData.price = '0'
		formData.user = '2'
		formData.minPrice = ''
		formData.maxPrice = ''
	}
</script>

t-dropdown-menu Props ​

属性名类型默认值说明可选值
sizeString"medium"组件尺寸large, medium, small, mini
typeString"primary"组件类型info, primary, error, warning, success
disabledBooleanfalse组件是否禁用true, false
hoverBooleanfalse是否有点击效果true, false
pathString""点击组件后跳转的页面路径-
effectString"normal"组件显示主题normal, dark, light, plain
maxHeightNumber-1选项最大高度，设计高度后内容支持滚动-
modelObject{}绑定的表单对象-

t-dropdown-menu Events ​

事件名说明回调参数
select选中时触发选中的值
click点击时触发-
transitionend动画结束时触发-
initFinished组件初始化完成触发组件的节点信息
touchstart触摸开始时触发触摸事件对象
touchend触摸结束时触发触摸事件对象
touchmove触摸移动时触发触摸事件对象
touchcancel触摸取消时触发触摸事件对象

t-dropdown-menu Slots ​

插槽名说明
default下拉菜单项插槽，用于放置t-dropdown-item子组件