主题
LimeDropdownMenu 下拉菜单
- 菜单呈现数个并列的选项类目，用于页面的内容筛选,兼容uniapp/uniappx
- 插件依赖
lime-popup,lime-icon,lime-svg不喜勿下。
安装
注意
- 🔔 本插件依赖的lime-svg在 uniapp x app中是原生插件，如果购买(收费为5元)则需要自定义基座，才能使用！uniapp可忽略。
- 🔔 如果不需要lime-svg在lime-icon代码中注释掉即可
html
// lime-icon/components/l-icon.uvue 第4行 注释掉即可。
<!-- <l-svg class="l-icon" :class="classes" :style="styles" :color="color" :src="iconUrl" v-else :web="web" @error="imageError" @load="imageload" @click="$emit('click')"></l-svg> -->代码演示
基础用法
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>js
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' },
];自定义菜单内容
通过插槽可以自定义 DropdownItem 的内容，此时需要使用 DropdownMenu 实例上的 close 或指定 DropdownItem 的 toggle 方法手动控制菜单的显示。
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>js
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>横向滚动
通过把 spaceEvenly 设为false 取消均分，当菜单内容超过容器时会出现滚动
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="value2" :options="option2" />
<l-dropdown-item v-model="value2" :options="option2" />
<l-dropdown-item v-model="value2" :options="option2" />
<l-dropdown-item v-model="value2" :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>禁用菜单
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>API
DropdownMenu Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| active-color | 菜单标题和选项的选中态颜色 | string | #1989fa |
| direction | 菜单展开方向，可选值为up | string | down |
| z-index | 菜单栏 z-index 层级 | number | string | 10 |
| duration | 动画时长，单位秒，设置为 0 可以禁用动画 | number | string | 0.2 |
| overlay | 是否显示遮罩层 | boolean | true |
| closeOnClickOverlay | 是否在点击遮罩层后关闭菜单 | boolean | true |
| closeOnClickOutside | 是否在点击外部元素后关闭菜单 | boolean | true |
| spaceEvenly | 是否均分菜单，选项宽度超过菜单栏宽度时，可以横向滚动 | boolean | true |
| bgColor | 背景色 | string | - |
| color | 文本色 | string | - |
DropdownItem Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 当前选中项对应的 value | number | string | - |
| label | 菜单项标题 | string | 当前选中项文字 |
| options | 选项数组 | Option[] | [] |
| keys | 用来定义 value / label 在 options 中对应的字段别名 | Object | `` |
| disabled | 是否禁用菜单 | boolean | false |
DropdownItem Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 点击选项导致 value 变化时触发 | 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 变量，可用于自定义样式，uniapp x app 无效。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --l-dropdown-menu-height | 96rpx | - |
| --l-dropdown-menu-bg-color | $bg-color-container | - |
| --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 | 30rpx | - |
| --l-dropdown-menu-arrow-size | 12rpx | - |
| --l-dropdown-menu-arrow-color | $gray-4 | - |
| --l-dropdown-item-cell-height | 50px | - |
| --l-dropdown-item-cell-cell-padding | 14px 16px | - |
| --l-dropdown-item-cell-title-color | $text-color-1 | - |
| --l-dropdown-item-cell-title-font-size | $font-size-md | - |
| --l-dropdown-body-max-height | 560rpx | - |
打赏
如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。
