更新记录

2.2.2（2024-01-31）

修复

1. 修复picker值选定残留问题

2.2.1（2024-01-30）

2.2.1

优化

1. 新增getMenuList方法，获取菜单数据【示例6】
2. 新增getMenuIndex方法，获取指定prop的菜单索引位置
3. 优化示例使用方法
4. 修复互斥、联动的值处理问题
5. 更新了说明文档

2.2.0（2024-01-29）

推荐更新

1. 新增更多的示例，示例更全面丰富
2. 新增openMenuItemPopup方法，打开指定菜单弹窗【示例8】
3. 新增closeMenuPopup方法，关闭菜单弹窗【示例5】
4. 新增getMenuValue方法，获取菜单的值【示例8】
5. 新增updateMenu方法，更新指定菜单项【示例7】
6. 新增setMenuLoading方法，让某个菜单项处于加载中状态，异步数据有用【示例7】
7. 修复fixedTopValue及顶部样式错误【示例2】
8. 新增syncDataKey支持异步数据嵌套回调【示例7】
9. 新增异步数据加载状态【示例7】
10. 修复日期快捷获取上个月时间的错误
11. 修复手动关闭时存在的点击残留
12. 优化菜单项联动、互斥选择
13. 优化异步数据阻塞菜单回显问题
14. 修复数据回调时，会重新渲染菜单问题
15. @close参数2支持返回当前菜单列表(Array)
16. @confirm参数2支持返回当前菜单已选内容(Object)
17. 菜单项daterange支持showQuick控制是否显示日期快选
18. 移除menuActiveText，用处不大
19. 更新了说明文档

平台兼容性

da-dropdown

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

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

同时更新 Vue2 版本，在此查看 ===> Vue2 版

关于使用

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

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

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

功能一览

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

组件示例

<template>
  <DaDropdown
    :dropdownMenu="dropdownMenuList"
    themeColor="#007aff"
    textColor="#333333"
    :duration="300"
    fixedTop
    @confirm="handleConfirm"
    @close="handleClose"
    @open="handleOpen">
    <template #slot1="{item,index}">
      <view style="padding: 40px">自定义插槽内容</view>
    </template>
  </DaDropdown>
</template>

import { defineComponent, ref } from 'vue'

import DaDropdown from '@/components/da-dropdown/index.vue'

export default defineComponent({
  components: { DaDropdown },
  setup() {
    const dropdownMenuList = ref([
      // 演示数据请看下方各模块说明或下载示例项目查看
      // ...
    ])
    function handleConfirm(v) {
      console.log('handleConfirm ==>', v)
    }
    function handleClose(v) {
      console.log('handleClose ==>', v)
    }
    function handleOpen(v) {
      console.log('handleOpen ==>', v)
    }
    return {
      dropdownMenuList,
      handleConfirm,
      handleClose,
      handleOpen,
    }
  },
})

组件参数

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

组件事件

组件方法

组件菜单项

dropdownMenu 基础参数

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

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

菜单项 - 下拉列表(cell)

// 简单示例
const dropdownMenuList = [
  {
    title: '下拉',
    type: 'cell',
    prop: 'god1',
    showAll: true,
    showIcon: true,
    // value: '2', // 默认内容2
    options: [
      { label: '下拉列表项1', value: '1', suffix: '副标题' },
      { 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>
  <DaDropdown>
    <template #slot1="{item,index}">
      <view>自定义插槽2内容 {{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>
  </DaDropdown>
</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.2.2

差异化

已通过测试

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

未测试

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

开发组

@CRLANG