LimeDropdownMenu 下拉菜单

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

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

文档链接

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

安装方法

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

注意🔔

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

代码演示

基础用法

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

html

<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' },
];

自定义菜单内容

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

html

<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 属性或插槽可以自定义菜单标题内容。

html

<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 属性可以自定义菜单标题和选项的选中态颜色。

html

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

横向滚动菜单

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

html

<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，菜单即可向上展开。

html

<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 属性来禁用特定的菜单项。

html

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

快速预览

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

html

<!-- 代码位于 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

属性名	说明	类型	默认值
activeColor	菜单标题和选项的选中态颜色	string	-
direction	菜单展开方向，可选值为`up`或`down`	string	`down`
zIndex	菜单栏 z-index 层级	number	`999`
duration	动画时长，单位毫秒，设置为 0 可以禁用动画	number	-
overlay	是否显示遮罩层	boolean	`true`
closeOnClickOverlay	是否在点击遮罩层后关闭菜单	boolean	`true`
closeOnClickOutside	是否在点击外部元素后关闭菜单	boolean	`true`
spaceEvenly	是否均分菜单，选项宽度超过菜单栏宽度时，可以横向滚动	boolean	`true`
bgColor	菜单背景色	string	-
color	菜单文本色	string	-

DropdownItem Props

属性名	说明	类型	默认值
v-model	当前选中项对应的 value	number \| string	-
options	选项数组	Object[]	`[]`
keys	用来定义 value / label 在 options 中对应的字段别名	Object	-
disabled	是否禁用菜单	boolean	`false`
defaultValue	选中值，非受控属性	number \| string	-

DropdownItem Events

事件名	说明	回调参数
change	点击选项导致值变化时触发	value: 当前选中项的值
open	打开菜单栏时触发	-
close	关闭菜单栏时触发	-
opened	打开菜单栏且动画结束后触发	-
closed	关闭菜单栏且动画结束后触发	-

DropdownItem Slots

名称	说明
default	菜单内容
label	自定义菜单项标题

DropdownMenu 方法

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

方法名	说明	参数	返回值
close	关闭所有菜单的展示状态	-	-

DropdownItem 方法

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

方法名	说明	参数	返回值
toggle	切换菜单展示状态，传 `true` 为显示，`false` 为隐藏，不传(uniappx app 需要传 null)参为取反	show?: boolean	-

Option 数据结构

键名	说明	类型
label	文字	string
value	标识符	number \| string \| boolean
disabled	是否禁用选项	boolean

主题定制

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

变量名称	默认值	说明
`--l-dropdown-menu-height`	`48px`	菜单高度
`--l-dropdown-menu-bg-color`	`$bg-color-container`	菜单背景色
`--l-dropdown-menu-border-width`	`1px`	边框宽度
`--l-dropdown-menu-shadow`	`$shadow-4`	阴影效果
`--l-dropdown-menu-border-color`	`$border-color-1`	边框颜色
`--l-dropdown-menu-color`	`$text-color-1`	菜单文本颜色
`--l-dropdown-menu-active-color`	`$primary-color`	菜单选中态颜色
`--l-dropdown-menu-disabled-color`	`$text-color-3`	菜单禁用态颜色
`--l-dropdown-menu-font-size`	`$font-size-md`	菜单字体大小（中等字号）
`--l-dropdown-menu-arrow-size`	`6px`	下拉箭头的尺寸大小
`--l-dropdown-menu-arrow-color`	`$gray-4`	默认状态下箭头的颜色(uniappx app无效)
`--l-dropdown-menu-arrow-active-color`	`$gray-4`	激活状态下箭头的颜色(uniappx app无效)
`--l-dropdown-item-cell-height`	`50px`	下拉项单元格高度
`--l-dropdown-item-cell-padding-x`	`$spacer`	下拉项单元格水平方向内边距
`--l-dropdown-item-cell-padding-y`	`$spacer-sm`	下拉项单元格垂直方向内边距
`--l-dropdown-item-cell-title-color`	`$text-color-1`	下拉项单元格标题文字颜色
`--l-dropdown-item-cell-title-font-size`	`$font-size-md`	下拉项单元格标题文字大小
`--l-dropdown-body-max-height`	`280px`	下拉内容区域最大高度
`--l-dropdown-item-icon-border-width`	`3px`	选中图标边框粗细
`--l-dropdown-item-padding-x`	`$spacer`	菜单项水平内边距
`--l-dropdown-item-icon-width`	`17px`	选中图标宽度
`--l-dropdown-item-icon-height`	`11px`	选中图标高度
`--l-dropdown-menu-icon-margin-left`	`$spacer-tn`	图标左侧间距

支持与赞赏

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

支付宝赞助	微信赞助

源代码

组件源码

LimeDropdownMenu 下拉菜单 ​

文档链接 ​

安装方法 ​

代码演示 ​

基础用法 ​

自定义菜单内容 ​

自定义菜单标题 ​

自定义选中态颜色 ​

横向滚动菜单 ​

向上展开菜单 ​

禁用菜单项 ​

快速预览 ​

插件标签说明 ​

Vue2使用方法 ​

API文档 ​

DropdownMenu Props ​

DropdownItem Props ​

DropdownItem Events ​

DropdownItem Slots ​

DropdownMenu 方法 ​

DropdownItem 方法 ​

Option 数据结构 ​

主题定制 ​

支持与赞赏 ​

源代码 ​

LimeDropdownMenu 下拉菜单

文档链接

安装方法

代码演示

基础用法

自定义菜单内容

自定义菜单标题

自定义选中态颜色

横向滚动菜单

向上展开菜单

禁用菜单项

快速预览

插件标签说明

Vue2使用方法

API文档

DropdownMenu Props

DropdownItem Props

DropdownItem Events

DropdownItem Slots

DropdownMenu 方法

DropdownItem 方法

Option 数据结构

主题定制

支持与赞赏

源代码