更新记录

2.2.1（2024-01-30） 下载此版本

推荐更新

版本同步于 Vue3 版，查看 Vue3 版更新日志。

2.1.1（2023-07-27） 下载此版本

优化

1. 优化图标字体命名

2.1.0（2023-07-12） 下载此版本

推荐更新

版本同步于 Vue3 版，查看 Vue3 版更新日志。

平台兼容性

da-dropdown-vue2

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

内容同步于 Vue3 版本，在此查看 ===> Vue3 版

与 Vue3 版本版本不同的是，此版本兼容更全面，比如 360 小程序、快应用等均支持

关于使用

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

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

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

功能一览

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

组件示例

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

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

export default {
  components: { DaDropdownVue2 },
  data() {
    return {
      title: 'hello',
      dropdownMenuList: [
        // 演示数据请看下方各模块说明或下载示例项目查看
        // ...
      ],
    }
  },
  methods: {
    handleConfirm(v) {
      console.log('handleConfirm ==>', v)
    },
    handleClose(v) {
      console.log('handleClose ==>', v)
    },
    handleOpen(v) {
      console.log('handleOpen ==>', v)
    },
  },
}

组件参数

温馨提示：如果页面定义了 "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>
  <DaDropdownVue2>
    <template v-slot:slot1="{item,index}">
      <view>自定义插槽2内容 {{item.value}} {{index}}</view>
    </template>
    <template v-slot:slot2="{item,index}">
      <view>自定义插槽2内容 {{item.value}} {{index}}</view>
    </template>
    <template v-slot:slot3="{item,index}">
      <view>自定义插槽3内容 {{item.value}} {{index}}</view>
    </template>
    <template v-slot:slot4="{item,index}">
      <view>自定义插槽4内容 {{item.value}} {{index}}</view>
    </template>
    <template v-slot:slot5="{item,index}">
      <view>自定义插槽5内容 {{item.value}} {{index}}</view>
    </template>
  </DaDropdownVue2>
</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.1

差异化

已通过测试

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

未测试

• 快手小程序由于非企业用户暂无演示

开发组

@CRLANG