更新记录

2.3.1（2026-03-17） 下载此版本

功能增强 - Cell 样式配置

功能增强

1. 新增 cellConfig 配置，支持统一设置 Cell 样式
   • itemHeight: 设置 item 高度（rpx）
   • itemColor: 设置 item 文字颜色
   • suffixColor: 设置 suffix 文字颜色
   • borderColor: 设置边框颜色
   • checkIconUrl: 设置选中图标（支持本地图片路径）
2. Cell 选项支持单独样式配置，优先级高于 cellConfig
   • DaCellItemOption 新增 itemHeight、itemColor、suffixColor、borderColor、checkIconUrl 属性
3. 选中图标从字体图标改为 image 组件，支持自定义图标

优化改进

1. 优化 Cell 样式配置的优先级机制：单项配置 > cellConfig 配置 > 默认样式
2. 改进选中图标显示方式，更灵活更美观

2.3.0（2026-03-17） 下载此版本

重大优化更新 - 根据开发者反馈修复15项问题

Bug 修复

1. 修复级联选择数据残留和第二层数据不显示问题
2. 修复 field 配置字段映射无效问题
3. 修复 mounted 中初始化数据不渲染问题
4. 修复网络请求数据更新失败问题

功能增强

1. 新增 resetMenu(prop?) 方法，支持重置菜单项
2. 新增 borderColor 属性，支持自定义分割线颜色
3. 新增 search-icon 插槽，支持自定义搜索图标
4. 单选组件支持点击已选项取消选择
5. 筛选组件返回数据包含 label 信息
6. 所有弹出内容添加滚动支持（max-height: 60vh）
7. 自动监听 dropdownMenu 变化并重新渲染

优化改进

1. 优化级联选择的数据清除逻辑
2. 优化 field 字段映射机制，支持完整的字段配置
3. 优化筛选组件滚动体验
4. 改进数据处理和状态管理

2.2.3（2026-03-15） 下载此版本

文档与接口修复

1. 修复 openMenuItemPopup、closeMenuPopup 未正确暴露的问题
2. 修复 getMenuValue 未正确暴露的问题
3. defineExpose 新增 initData 方法
4. 文档示例改为 <script setup> 风格，组件名改为 kebab-case
5. 文档方法表补充 initData，修正各方法参数格式

平台兼容性

uni-app(4.0)

da-dropdown

一个头部导航栏下拉弹窗组件，多平台兼容。

组件一直在更新，遇到问题可在下方讨论。

Vue2 版本已停更，在此查看 ===> Vue2 版

关于使用

可在右侧的使用 HBuilderX 导入插件或下载示例项目ZIP，示例项目已添加多个示例，方便快速上手。

可通过下方的示例及文档说明，进一步了解使用组件相关细节参数。

插件地址：https://ext.dcloud.net.cn/plugin?id=11840

功能一览

1. 下拉列表（单选）
2. 点击常亮
3. 点击排序
4. 下拉筛选（单选按钮、多选按钮、滑动选择器）
5. 级联筛选（单选）
6. 日期筛选（日期快选、日期区间选择）
7. 顶部搜索
8. 自定插槽

组件示例

<template>
  <da-dropdown
    :dropdown-menu="dropdownMenuList"
    theme-color="#007aff"
    text-color="#333333"
    :duration="300"
    fixed-top
    @confirm="handleConfirm"
    @close="handleClose"
    @open="handleOpen"
  >
    <template #slot1="{ item, index }">
      <view style="padding: 40px">自定义插槽内容</view>
    </template>
  </da-dropdown>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const dropdownMenuList = ref([
  // 演示数据请看下方各模块说明或下载示例项目查看
  // ...
])

function handleConfirm(value: Record<string, any>, allValue: Record<string, any>) {
  console.log('handleConfirm ==>', value, allValue)
}
function handleClose(index: number, menuList: any[]) {
  console.log('handleClose ==>', index, menuList)
}
function handleOpen(index: number) {
  console.log('handleOpen ==>', index)
}
</script>

组件参数

温馨提示：如果页面定义了 "navigationStyle": "custom" ，因此固定头部时需要额外获取状态栏高度，以免被异形屏头部覆盖，此时的 fixedTopValue 的作用就出来了，通过 fixedTopValue 自定义加减固定头部所处的位置。

组件事件

组件方法

组件菜单项

dropdownMenu 基础参数

除上方基础参数以外，不同的菜单项(type)会有额外的配置参数

type 说明 cell 下拉列表 click 点击 sort 排序 filter 复杂筛选 picker 级联 daterange 日期范围 search 搜索框(菜单项 type 唯一) slot 弹窗插槽

菜单项 - 下拉列表(cell)

cellConfig 配置项 v2.3.1+

注意：options 中的单个选项也支持以上所有配置项，单项配置优先级高于 cellConfig

// 简单示例
const dropdownMenuList = [
  {
    title: '下拉',
    type: 'cell',
    prop: 'god1',
    showAll: true,
    showIcon: true,
    // value: '2', // 默认内容2
    // 统一配置 Cell 样式
    cellConfig: {
      itemHeight: 88,
      itemColor: '#333',
      suffixColor: '#999',
      borderColor: '#f0f0f0',
      checkIconUrl: '/static/check.png'
    },
    options: [
      {
        label: '下拉列表项1',
        value: '1',
        suffix: '副标题',
        // 单项配置，优先级更高
        itemHeight: 100,
        itemColor: '#007aff'
      },
      { label: '下拉列表项2', value: '2' },
      { label: '下拉列表项3', value: '3' },
    ],
  },
]

菜单项 - 高亮(click)

// 简单示例
const dropdownMenuList = [
  {
    title: '点击',
    type: 'click',
    prop: 'god2',
    // value: true, // 默认选中
  },
]

菜单项 - 排序(sort)

// 简单示例
const dropdownMenuList = [
  {
    title: '排序',
    type: 'sort',
    prop: 'god3',
    // value: 'asc', // 默认升序
  },
]

菜单项 - 筛选(filter)

filter -> options 参数说明

// 简单示例
const dropdownMenuList = [
  {
    title: '筛选',
    type: 'filter',
    prop: 'god4',
    // 默认选中单选2、多选2、3、滑动30
    // value: { ft1: '2', ft2: ['2', '3'], ft3: 30 },
    options: [
      {
        title: '单选',
        type: 'radio',
        prop: 'ft1',
        options: [
          { label: '单选1', value: '1' },
          { label: '单选2', value: '2' }
        ],
      },
      {
        title: '多选',
        type: 'checkbox',
        prop: 'ft2',
        options: [
          { label: '多选1', value: '1' },
          { label: '多选2', value: '2' }
        ],
      },
      {
        title: '滑块',
        type: 'slider',
        prop: 'ft3',
        componentProps: {
          min: 0,
          max: 100,
          step: 1,
          showValue: true,
        },
      },
    ],
  },
]

菜单项 - 级联(picker)

// 简单示例
const dropdownMenuList = [
  {
    title: '级联选择',
    type: 'picker',
    prop: 'god5',
    showAll: true,
    showIcon: true,
    // showAll 为true时相当于在options第一的位置插入“不限”项
    // { label: '不限', value: '-9999' },
    field: {
      label: 'label',
      value: 'value',
      children: 'children',
    },
    // value: ['2', '22'], // 默认选中 级联X22
    options: [
      {
        label: '级联X1',
        value: '1',
        children: [
          { label: '级联X11', value: '11' },
          { label: '级联X12', value: '12' },
        ],
      },
      {
        label: '级联X2',
        value: '2',
        children: [
          { label: '级联X21', value: '21' },
          { label: '级联X22', value: '22' },
        ],
      },
    ],
  },
]

菜单项 - 日期(daterange)

// 简单示例
const dropdownMenuList = [
  {
    title: '日期范围',
    type: 'daterange',
    prop: 'god6',
    // 默认选中 2022-01-01到2022-02-01
    // value: { start: '2022-01-01', end: '2022-02-01' },
  },
]

菜单项 - 顶部搜索框(search)

当存在此类型时，头部将会展示搜索框，注意：此类型唯一

// 简单示例
const dropdownMenuList = [
  {
    title: '搜索',
    type: 'search',
    prop: 'god0',
  },
]

菜单项 - 拓展插槽(slot1、slot2、slot3、slot4、slot5)

拓展插槽有 5 个，足以应付业务需求了，类型名称为slot1、slot2、slot3、slot4、slot5，这是固定的类型值

<!-- 简单示例 -->
<template>
  <da-dropdown :dropdown-menu="dropdownMenuList">
    <template #slot1="{ item, index }">
      <view>自定义插槽1内容 {{ item.value }} {{ index }}</view>
    </template>
    <template #slot2="{ item, index }">
      <view>自定义插槽2内容 {{ item.value }} {{ index }}</view>
    </template>
    <template #slot3="{ item, index }">
      <view>自定义插槽3内容 {{ item.value }} {{ index }}</view>
    </template>
    <template #slot4="{ item, index }">
      <view>自定义插槽4内容 {{ item.value }} {{ index }}</view>
    </template>
    <template #slot5="{ item, index }">
      <view>自定义插槽5内容 {{ item.value }} {{ index }}</view>
    </template>
  </da-dropdown>
</template>

const dropdownMenuList = [
  {
    title: '插槽1',
    type: 'slot1',
    prop: 'god1',
  },
  {
    title: '插槽2',
    type: 'slot2',
    prop: 'god2',
  },
  {
    title: '插槽3',
    type: 'slot3',
    prop: 'god3',
  },
  {
    title: '插槽4',
    type: 'slot4',
    prop: 'god4',
  },
  {
    title: '插槽5',
    type: 'slot5',
    prop: 'god5',
  },
]

组件版本

v2.3.1

差异化

已通过测试

• H5 页面
• 微信小程序
• 支付宝、钉钉小程序
• 字节跳动、抖音、今日头条小程序
• 百度小程序
• 飞书小程序
• QQ 小程序
• 京东小程序

未测试

• 快手小程序由于非企业用户暂无演示
• 快应用、360 小程序因 Vue3 支持的原因暂无演示

开发组

@CRLANG