t-dropdown-menu

DropdownMenu 下拉菜单

组件介绍

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

平台兼容

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

基础用法

<template>
  <t-dropdown-menu :model="formData" @select="handleSelect">
    <t-dropdown-item prop="sort" label="排序" :options="sortOptions">
    </t-dropdown-item>
    <t-dropdown-item prop="category" label="分类" :options="categoryOptions">
    </t-dropdown-item>
    <t-dropdown-item prop="price" label="价格" :options="priceOptions">
    </t-dropdown-item>
  </t-dropdown-menu>
  <t-text class="mt-20">选择结果: {{ formData }}</t-text>
</template>

<script setup>
const formData = ref({
  sort: 'default',
  category: '',
  price: ''
});

const sortOptions = ref([
  { value: 'default', label: '默认排序' },
  { value: 'price_asc', label: '价格从低到高' },
  { value: 'price_desc', label: '价格从高到低' },
  { value: 'sales_desc', label: '销量从高到低' }
]);

const categoryOptions = ref([
  { value: '', label: '全部分类' },
  { value: 'electronics', label: '电子产品' },
  { value: 'clothing', label: '服装' },
  { value: 'food', label: '食品' },
  { value: 'books', label: '图书' }
]);

const priceOptions = ref([
  { value: '', label: '全部价格' },
  { value: '0-100', label: '0-100元' },
  { value: '100-500', label: '100-500元' },
  { value: '500-1000', label: '500-1000元' },
  { value: '1000+', label: '1000元以上' }
]);

function handleSelect(data) {
  console.log('选择结果:', data);
  // 这里可以根据选择结果进行数据筛选或排序操作
}
</script>

<style scoped>
.mt-20 {
  margin-top: 20rpx;
  padding: 0 20rpx;
}
</style>

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
maxHeight	Number	-1	选项最大高度，设计高度后内容支持滚动	-
model	Object	{}	绑定的表单对象	-

Events

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

Slots

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