更新记录

1.0.6（2021-12-28） 下载此版本

1、支持异步增加筛选条件。 2、支持赋默认值。

1.0.5（2021-04-21） 下载此版本

1、修复APP端多选单选后选中未更新问题； 2、支持展示多个日期、区间范围； 3、日期、数量范围支持自定义开始、结束范围name；

1.0.4（2021-03-04） 下载此版本

1、增加日期筛选、文本框筛选； 2、移除visibleDrawer，通过ref来控制显示隐藏； 3、优化已知问题；

平台兼容性

uni-app

依赖组件

uni-drawer mx-datepicker（DatePicker） 代码单选多选参考了sl-filter

使用说明

<template>
<view class="page-content">
        <view @tap="orderbyChange" :class="{'text-theme': hasChoose}">
            <span></span>筛选按钮
        </view>
        <fjj-condition ref='condition' @touchmove.stop :color="color" :list="menuList" :defaultValue="defaultValue" @result="resultConditon" />
    </view>
</template>

import fjjCondition from '@/components/fjj-condition/fjj-condition.vue';
    export default {
        data() {
            return {
                color: '#4D7BFE',
                hasChoose: false,
                menuList: [],
                defaultValue: {},
            };
        },
        components: {
            fjjCondition,
        },
        onLoad() {
            setTimeout(() => {
                this.menuList = [{
                    'title': '多选',
                    'type': 'custom',
                    'key': 'custom1',
                    'isMutiple': true, //多选
                    'detailList': [{
                        title: '多选选项1',
                        value: "1",
                        isSelected: true
                    }, {
                        title: '多选选项2',
                        value: "2",
                    }, {
                        title: '多选选项3',
                        value: "3",
                    }, {
                        title: '多选选项4',
                        value: "4",
                    }, {
                        title: '多选选项5',
                        value: "5",
                    }, {
                        title: '多选选项6',
                        value: "6",
                    }],
                }, {
                    'title': '多选带更多',
                    'type': 'custom',
                    'key': 'custom3',
                    'isMutiple': true, //多选
                    'detailList': [{
                        title: '多选选项1',
                        value: "1",
                    }, {
                        title: '多选选项2',
                        value: "2",
                    }, {
                        title: '多选选项3',
                        value: "3",
                    }, {
                        title: '多选选项4',
                        value: "4",
                    }, {
                        title: '多选选项5',
                        value: "5",
                    }, {
                        title: '多选选项6',
                        value: "6",
                    }, {
                        title: '多选选项7',
                        value: "7",
                    }],
                }, {
                    'title': '单选',
                    'type': 'custom',
                    'key': 'custom2',
                    'isMutiple': false, //单选
                    'detailList': [{
                        title: '选项1',
                        value: "1",
                    }, {
                        title: '选项2',
                        value: "2",
                    }],
                }, {
                    'title': '日期范围',
                    'type': 'range',
                    'key': 'time1',
                    'minName': 'time1MinName',
                    'maxName': 'time1MaxName',
                }, {
                    'title': '日期范围2',
                    'type': 'range',
                    'key': 'time11',
                }, {
                    'title': '日期范围带时间',
                    'type': 'rangetime',
                    'key': 'time2',
                }, {
                    'title': '日期',
                    'type': 'date',
                    'key': 'time3',
                }, {
                    'title': '日期2',
                    'type': 'date',
                    'key': 'time4',
                }, {
                    'title': '金额范围',
                    'type': 'rangenumber',
                    'key': 'count',
                }, {
                    'title': '输入框',
                    'type': 'singleinput',
                    'key': 'input',
                }]
                this.defaultValue = {
                    custom1: ['1', '2'],
                    custom3: ['2', '3'],
                    custom2: 1,
                    time1: ['2021/02/01', '2021/02/03'],
                    time2: ['2021/10/01 00:00:00', '2021/10/07 23:59:59'],
                    time3: '2021/04/01',
                    count: [10, 20],
                    input: 'fjj',
                };
            },2000)

        },
        methods: {
            //筛选返回值
            resultConditon(obj) {
                this.$refs.condition.visibleDrawer = false;
                this.hasChoose = obj.hasChoose;
                console.log(obj);
            },
            orderbyChange(obj) {
                this.$refs.condition.visibleDrawer = true;
            }
        }
    };

属性说明

list值说明

result返回值说明