更新记录

1.0.1（2023-07-04）

更新示例项目

1.0.0（2023-07-04）

修订若干bug

0.0.1（2023-05-08）

支持联动列表，单选，多选，范围输入input。。。

平台兼容性

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

filterData 格式和默认值设置

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

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

使用

从uniapp插件市场导入

主题色

在项目的uni.scss中定义

/* 筛选组件 */ 
$filter-check-image:url(https://static.jingrizf.com/file/50b0e0e2-225d-4029-a1da-0ec7e10270ab.png); //列表选中的icon
$filter-main-color:#E64340;
$filter-light-color:#FFF5F5;

dropMenuItem

需要自己处理相关的数据逻辑，可以参考示例项目的pages/index/components/myFilterMenu组件

<template>
    <dropMenuItem 
        id="dropdown_menu_item" 
        :tabList="options.tabList" 
        :popOptions="options.popOptions" 
        :menuTitleClass="menuTitleClass" 
        @onOpen="onOpen" 
        @onClickMenuIndex="onClickMenuIndex" 
        @onClose="onClose" 
        @onSearch="onSearch" 
        @onMenuTitleChange="menuTitleChange" 
        @=""
        ref="dropMenuItem">
    </dropMenuItem>
</template>

参数

可选参数属性列表

tabListItem类型

popOptions 类型

popOptions为Object类型，注意popOptions的key要为 tabListItem 的 slotName，popOptions的值看下表，为对应菜单项的展开配置

popOptions[key].set的具体配置

set为一个对象数组结构，每一个对象为一个表单类型，分别有singleTag、multipleTag、singleList、linkageList、linkageList3、filterInput、defaultBtn。接下来分别介绍。

singleTag 为单选tag，结构如下：

{
columnNum: 4,//几列
contentType: "singleTag",//set 类型名称
data: [
{name: "不限", id: 0},
{name: "正在进行", id: 1},
{name: "即将开始", id: 2},
{name: "已结束", id: 3},
{name: "中止", id: 4},
{name: "撤回", id: 5},
], // singleTag 数据源
defaultIndex: 0, // 默认选中index
id: "a",
isAsTitle: true, // 是否以 singleTag title作为表单项title
key: "status", // 该项的参数key ,用于最后的确定传参
tagW: 160,//tag宽度
title: "状态",
}

>multipleTag
```js

singleList

{
id: "a",
key: "collation",
contentType: "singleList",
data: [
{name: "默认排序", type: "collation", id: 1}
],
defaultIndex: 0,
isAsTitle: true,
}

linkageList

{
id: "a",
key: "region",
contentType: "linkageList",
data: [{
id: "1",
name: "地区",
childList: [
{name: "不限", id: ""},
{
id: "79B535B2-E8DF-4D48-BC95-0BBD1B85FF50",
name: "工业园区",
value: "79B535B2-E8DF-4D48-BC95-0BBD1B85FF50"
}
]
}],
isAsTitle: true,
isSingleChoose: true,
}

linkageList3

filterInput

{
id: "e",
key: "currentPrice",
contentType: "filterInput",
salePriceEnd: null,
salePriceStart: null,
}

defaultBtn

{
id: "g",
contentType: "defaultBtn",
confirmW: 430,
resetW: 240,
}

Event 事件

dropMenuItem的实例方法

Slot 插槽