# t-dropdown-item

DropdownItem 下拉项

t-dropdown-item 组件介绍

下拉菜单项组件，与t-dropdown-menu组件配合使用，用于承载单个筛选面板的内容，支持自定义选项和插槽。

t-dropdown-item 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-dropdown-item 基础用法

配合 t-dropdown-menu 组件使用，参考 demo/dropdown-menu/dropdown-menu.uvue。

<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-item Props

属性名	类型	默认值	说明	可选值
size	String	"medium"	组件尺寸	large, medium, small, mini
type	String	"primary"	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	"normal"	组件显示主题	normal, dark, light, plain
prop	String	""	表单数据对应的字段名	-
label	String	""	标签	-
labelKey	String	"label"	标签对应的数据的字段名	-
valueKey	String	"value"	值对应的字段名	-
options	Array	[]	选项数据	-

t-dropdown-item Events

事件名	说明	回调参数
click	点击时触发	-
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象

t-dropdown-item Slots

插槽名	说明
default	自定义选项内容插槽，用于自定义下拉面板的内容