更新记录

1.1.9（2023-12-20）

修复自定义组件配置

1.1.8（2023-06-17）

修复组件弹窗嵌套时，层级问题

1.1.7（2023-05-19）

修复在ios下按钮边框显示不全的问题

平台兼容性

drop-down-vue3 --下拉筛选菜单，多平台测试通过，不支持的平台暂未测试

遇到问题或有建议可以加入QQ群(455948571)反馈
如果觉得组件不错，给五星鼓励鼓励咯！

filterData 格式和默认值设置

在 filterData 筛选列表中为需要选中的项添加 checked: true 即可，checked 不存或 checked：false 则不选中

const filterData = [{
    name: '价格',
    type: 'radio',
    submenu: [{
        name: '100-300',
    },{
        name: '500-600',
        checked: true //默认选中
    }]
}]

使用

从uniapp插件市场导入

<template>
    <view class="index">
        <drop-down-vue3 :filterData="filterData" @confirm="confirm"></drop-down-vue3>
    </view>
</template>

<script>
    import {ref} from 'vue'

    export default {
        setup() {
            // 下拉drop-down 支持的类型： type: radio | filter | single-hierarchy | hierarchy | hierarchy-column
            // 具体配置如下：可根据项目需求进行配置
            const filterData = ref([
              {
                name: "面积",
                type: "radio",
                submenu: [
                  {
                    name: "建筑面积",
                    submenu: [
                      { name: "40㎡以下", key: "floorage" },
                      { name: "40-60㎡", key: "floorage" },
                      { name: "60-80㎡", key: "floorage" },
                      { name: "80-100㎡", key: "floorage" },
                      { name: "100-120㎡", key: "floorage" },
                      { name: "120-144㎡", key: "floorage" },
                      { name: "144㎡以上", key: "floorage" }
                    ],
                  }
                ],
              },
              {
                name: "价格",
                type: "radio",
                submenu: [
                  {
                    name: "价格区间（元）",
                    submenu: [
                      { name: "1500元以下",value: "0-100",minValue: "",maxValue: "1500",key: "rentPrice", },
                      { name: "1500-2000元",value: "0-100",minValue: "1500",maxValue: "2000",key: "rentPrice", },
                      { name: "2000-2500元",value: "0-100",minValue: "2000",maxValue: "2500",key: "rentPrice", },
                      { name: "2500-3000元",value: "0-100",minValue: "2500",maxValue: "3000",key: "rentPrice", },
                      { name: "3000-4000元",value: "0-100",minValue: "3000",maxValue: "4000",key: "rentPrice", },
                      { name: "4000-5000元",value: "0-100",minValue: "4000",maxValue: "5000",key: "rentPrice", },
                                // 注意如果使用数字区间，可以在对象里面加一个$component属性，并赋予值等于numberRange，
                                // 那么你就会在获取的值中获取到maxValue和minValue两个属性对于区间控件的值
                                { name: "自定义",value: "custom",minValue: "",maxValue: "",$component: "numberRange",  key: "rentPrice", }
                    ],
                  }
                ],
              },
              {
                name: "户型",
                type: "filter",
                submenu: [
                  {
                    name: "户型选择",
                    submenu: [
                      {name: "一室",value: "1",key: "room",},
                      {name: "二室",value: "2",key: "room",},
                      {name: "三室",value: "3",key: "room",},
                      {name: "四室",value: "4",key: "room",},
                      {name: "五室",value: "5",key: "room",},
                      {name: "五室以上",value: "6",key: "room",},
                    ],
                  },
                ],
              },
                {
                    name: "排序",
                    type: "single-hierarchy",
                    submenu: [
                        {
                          name: "按创建时间升序",
                          value: "15",
                        },
                        {
                          name: "按创建时间降序",
                          value: "25",
                        },
                        {
                          name: "按价格高低升序",
                          value: "35",
                        },
                        {
                          name: "按价格高低降序",
                          value: "55",
                        },
                    ]
                },
              {
                name: "更多1",
                type: "hierarchy",
                submenu: [
                  {
                    name: "地铁",
                    submenu: [
                      {
                        name: "5号线",
                                    submenu: [
                                        {name: "文冲",},
                                        {name: "大沙东",}
                                    ]
                      },
                      {
                        name: "8号线",
                                    submenu: []
                      },
                                {
                                  name: "4号线",
                                    submenu: [
                                        {name: "琶洲",},
                                        {name: "万胜围",}
                                    ]
                                },
                                {
                                  name: "7号线",
                                    submenu: [
                                        {name: "大学城南",},
                                        {name: "大学城北",}
                                    ]
                                },
                    ],
                  },
                  {
                    name: "区域",
                    submenu: [
                      {name: "天河区",},
                      {name: "黄埔区",},
                      {name: "白云区",},
                    ],
                  },
                ],
              },
                {
                  name: "更多2",
                  type: "hierarchy-column",
                  submenu: [
                    {
                      name: "地铁",
                      submenu: [
                        {
                          name: "5号线",
                                    submenu: [
                                        {name: "文冲",},
                                        {name: "大沙东",}
                                    ]
                        },
                                {
                                  name: "4号线",
                                    submenu: [
                                        {name: "琶洲",},
                                        {name: "万胜围",}
                                    ]
                                },
                                {
                                  name: "7号线",
                                    submenu: [
                                        {name: "大学城南",},
                                        {name: "大学城北",}
                                    ]
                                },
                      ],
                    },
                    {
                      name: "区域",
                      submenu: [
                        {name: "天河区",},
                        {name: "黄埔区",},
                        {name: "白云区",},
                      ],
                    },
                  ],
                },
            ])
            function confirm(e) {
                // 返回值为一个数组
                console.log('eeee', e);
            }
            return {
                filterData,
                confirm
            }
        }
    }
</script>

描述

组件内部使用scss进行书写样式，主题色是使用根目录下的uni.scss中的 $uni-color-primary，使用HBuildX创建uniapp项目之后根目录下会自动创建uni.scss文件，如需修改主题色可以使用快捷键 Ctrl+F 输入 $uni-color-primary 并选择 本插件目录名称 drop-dowm 全部替换即可。

预览

功能预览

参数

可选参数属性列表

Event 事件

Slot 插槽

参考

参考 HM-filterDropdown 下拉式筛选菜单