更新记录

0.0.6（2025-12-12）

• fix: 修复自定义类型时uniappx 安卓端报错

0.0.5（2025-11-27）

• fix: 修复uniapp ios app不显示弹窗问题

0.0.4（2025-06-12）

• fix: 修复ios label箭头无法恢复的问题

平台兼容性

uni-app(4.51)

uni-app x(4.61)

lime-dropdown-menu 下拉菜单

菜单呈现数个并列的选项类目，用于页面的内容筛选。支持自定义菜单内容、自定义选中态颜色、向上展开等多种配置，可用于筛选、排序等场景。组件提供了丰富的自定义选项，可以满足各种复杂的界面设计需求。

插件依赖：lime-popup、lime-icon、lime-svg、lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 下拉菜单文档 - 站点1
• 下拉菜单文档 - 站点2
• 下拉菜单文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-dropdown-menu
2. 导入后可能需要重新编译项目
3. 在页面中使用l-dropdown-menu和l-dropdown-item组件

::: tip 注意🔔 本插件依赖的【lime-svg】是原生插件，如果购买(收费为6元)则需要自定义基座，才能使用， 若不需要删除即可 :::

代码演示

基础用法

最简单的下拉菜单用法，设置选项和默认值。

<l-dropdown-menu>
  <l-dropdown-item v-model="value1" :options="option1"></l-dropdown-item>
  <l-dropdown-item v-model="value2" :options="option2"></l-dropdown-item>
</l-dropdown-menu>

const value1 = ref(0);
const value2 = ref('a');
const option1 = [
  { label: '全部商品', value: 0 },
  { label: '新款商品', value: 1, disabled: true },
  { label: '活动商品', value: 2 },
];
const option2 = [
  { label: '默认排序', value: 'a' },
  { label: '好评排序', value: 'b' },
  { label: '销量排序', value: 'c' },
];

自定义菜单内容

通过插槽可以自定义下拉菜单的内容，此时需要手动控制菜单的显示。

<l-dropdown-menu ref="menuRef">
  <l-dropdown-item v-model="value1" :options="option1"></l-dropdown-item>
  <l-dropdown-item v-model="value2" label="筛选" ref="itemRef">
    <view class="cell">
      <text>包邮</text>
      <switch/>
    </view>
    <view class="cell">
      <text>团购</text>
      <switch/>
    </view>
    <view style="padding: 5px 16px;">
      <button type="primary" @click="onConfirm">确认</button>
    </view>
  </l-dropdown-item>
</l-dropdown-menu>

const menuRef = ref<LDropdownMenuComponentPublicInstance|null>(null);
const itemRef = ref<LDropdownItemComponentPublicInstance|null>(null);

const value = ref(0);
const switch1 = ref(false);
const switch2 = ref(false);
const options = [
  { label: '全部商品', value: 0 },
  { label: '新款商品', value: 1 },
  { label: '活动商品', value: 2 },
];
const onConfirm = () => {
  // 传入 true 是展开 
  // 传入 false 是关闭 
  // 传入 null 是取反，非uniappx app可为空
  itemRef.value?.toggle?.(null);
  // 或者
  // menuRef.value?.close?.();
};

自定义菜单标题

通过 label 属性或插槽可以自定义菜单标题内容。

<l-dropdown-menu>
  <view @click="onCustomClick" style="flex: 1; height: 100%; align-items: center; justify-content: center; padding: 0 15px;">
    <text>自定义</text>
  </view>
  <l-dropdown-item v-model="value1" :options="option1" label="我是label"></l-dropdown-item>
  <l-dropdown-item v-model="value2" :options="option2">
    <template #label="{visible}">
      <text>我是插槽{{visible}}</text>
    </template>
  </l-dropdown-item>
</l-dropdown-menu>

自定义选中态颜色

通过 active-color 属性可以自定义菜单标题和选项的选中态颜色。

<l-dropdown-menu active-color="#ee0a24">
  <l-dropdown-item v-model="value1" :options="option1"></l-dropdown-item>
  <l-dropdown-item v-model="value2" :options="option2"></l-dropdown-item>
</l-dropdown-menu>

横向滚动菜单

当菜单项较多时，可以设置横向滚动。

<l-dropdown-menu :spaceEvenly="false">
  <l-dropdown-item v-model="value1" :options="option1" />
  <l-dropdown-item v-model="value2" :options="option2" />
  <l-dropdown-item v-model="value3" :options="option1" />
  <l-dropdown-item v-model="value4" :options="option2" />
  <l-dropdown-item v-model="value5" :options="option1" />
  <l-dropdown-item v-model="value6" :options="option2" />
</l-dropdown-menu>

向上展开菜单

将 direction 属性值设置为 up，菜单即可向上展开。

<l-dropdown-menu direction="up">
  <l-dropdown-item v-model="value1" :options="option1" />
  <l-dropdown-item v-model="value2" :options="option2" />
</l-dropdown-menu>

禁用菜单项

可以通过 disabled 属性来禁用特定的菜单项。

<l-dropdown-menu>
  <l-dropdown-item v-model="value1" disabled :options="option1" />
  <l-dropdown-item v-model="value2" disabled :options="option2" />
</l-dropdown-menu>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-dropdown-menu/components/lime-dropdown-menu -->
<lime-dropdown-menu />

插件标签说明

l-dropdown-menu 为组件标签 lime-dropdown-menu 为演示标签

Vue2使用方法

Vue2项目需要添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

DropdownMenu Props

DropdownItem Props

DropdownItem Events

DropdownItem Slots

DropdownMenu 方法

通过 ref 可以获取到 DropdownMenu 实例并调用实例方法。

DropdownItem 方法

通过 ref 可以获取到 DropdownItem 实例并调用实例方法。

Option 数据结构

主题定制

组件提供了以下CSS变量，可用于自定义样式：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助