xtf-dropdown-menu

组件说明

xtf-dropdown-menu 是下拉菜单组件，用于在顶部展示可展开的筛选菜单。配合 xtf-dropdown-item 使用，支持单选/多选、遮罩层、自定义样式和多平台适配，适用于列表筛选、分类选择和条件过滤等场景。

---

基础用法

1. 单选筛选

xtf-dropdown-menu 与 xtf-dropdown-item 配合使用：

<template>
  <view>
    <xtf-dropdown-menu>
      <xtf-dropdown-item v-model="sort" title="排序" :options="sortOptions" />
      <xtf-dropdown-item v-model="category" title="分类" :options="categoryOptions" />
    </xtf-dropdown-menu>
    <view style="padding: 24rpx">
      <xtf-text level="body" :text="'排序: ' + sort + '，分类: ' + category" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      sort: 'default',
      category: 'all',
      sortOptions: [
        { text: '默认', value: 'default' },
        { text: '价格升序', value: 'price-asc' },
        { text: '价格降序', value: 'price-desc' },
        { text: '销量优先', value: 'sales' }
      ],
      categoryOptions: [
        { text: '全部', value: 'all' },
        { text: '数码', value: 'digital' },
        { text: '服装', value: 'clothing' },
        { text: '食品', value: 'food' }
      ]
    }
  }
}
</script>

2. 多选筛选

通过 multiple 启用多选模式：

<template>
  <view>
    <xtf-dropdown-menu>
      <xtf-dropdown-item v-model="filters" title="筛选" :options="filterOptions" multiple />
    </xtf-dropdown-menu>
  </view>
</template>

<script>
export default {
  data() {
    return {
      filters: [],
      filterOptions: [
        { text: '包邮', value: 'free-shipping' },
        { text: '折扣', value: 'discount' },
        { text: '新品', value: 'new' },
        { text: '有货', value: 'in-stock' }
      ]
    }
  }
}
</script>

3. 自定义内容

不传 options 时使用默认插槽自定义内容：

<template>
  <view>
    <xtf-dropdown-menu>
      <xtf-dropdown-item title="价格范围">
        <view style="padding: 24rpx">
          <xtf-slider v-model="priceRange" :min="0" :max="1000" />
          <xtf-button label="确定" size="sm" block style="margin-top: 16rpx" />
        </view>
      </xtf-dropdown-item>
    </xtf-dropdown-menu>
  </view>
</template>

<script>
export default {
  data() {
    return {
      priceRange: 500
    }
  }
}
</script>

---

全部属性

属性	类型	默认值	作用描述	适用范围
variant	String	'soft'	视觉变体	视觉样式
activeKey	String | Number	-1	当前激活项索引	激活项
overlay	Boolean	true	是否显示遮罩	遮罩
closeOnClickOverlay	Boolean	true	点击遮罩是否关闭	关闭行为
lockScroll	Boolean	true	是否锁定滚动	滚动锁定
popupOffset	String | Number	110	弹出层偏移（rpx）	偏移
matchTriggerWidth	Boolean	true	弹出层是否匹配触发器宽度	宽度匹配
duration	String | Number	''	动画时长	动画
zIndex	String | Number	''	层级	层级
activeColor	String	''	激活颜色	激活色
itemClass / itemStyle	String / String | Object	''	菜单标题项类名/样式	标题项定制
titleClass / titleStyle	String / String | Object	''	标题文本类名/样式	标题定制
arrowClass / arrowStyle	String / String | Object	''	箭头类名/样式	箭头定制
popupClass / popupStyle	String / String | Object	''	弹出面板类名/样式	面板定制
customClass	String	''	自定义类名	样式覆盖
customStyle	String | Object	''	自定义样式	动态样式覆盖

---

事件

事件名称	触发时机	回调参数	参数说明
change	激活项变化时触发	(index)	当前激活项索引
open	打开时触发	(index)	打开的项索引
close	关闭时触发	(index: Number)	关闭前激活的项索引
opened	打开完成后触发	(index: Number)	打开的项索引
closed	关闭完成后触发	(index: Number)	关闭的项索引
update:activeKey	激活项更新时触发	(index: Number)	打开时为索引，关闭时为 -1

事件使用示例

<template>
  <xtf-dropdown-menu
    v-model:active-key="activeKey"
    @open="onOpen"
    @opened="onOpened"
    @change="onChange"
    @close="onClose"
    @closed="onClosed"
  >
    <xtf-dropdown-item title="排序" :options="options" />
  </xtf-dropdown-menu>
</template>

<script>
export default {
  data() {
    return {
      activeKey: -1,
      options: [
        { text: '综合', value: 'all' },
        { text: '最新', value: 'new' }
      ]
    }
  },
  methods: {
    onOpen(index) {
      console.log('open', index)
    },
    onOpened(index) {
      console.log('opened', index)
    },
    onChange(index) {
      console.log('change', index)
    },
    onClose(index) {
      console.log('close', index)
    },
    onClosed(index) {
      console.log('closed', index)
    }
  }
}
</script>

---

主题说明

• 菜单栏使用 var(--xtf-color-surface) 背景
• 激活项标题使用主题色
• 箭头使用 xtf-icon 组件
• 遮罩层使用半透明背景
• 弹出层使用圆角和阴影

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖相关 CSS 变量。