更新记录

1.0.4（2020-12-09） 下载此版本

新增监听选项 tapItem 和全选事件 tapItemAll

1.0.3（2020-09-11） 下载此版本

修复在微信小程序中的报错

1.0.2（2020-07-29） 下载此版本

修复IOS端选项未渲染bug

平台兼容性

筛选面板

筛选面板。组件名：drawer-filter-panel

使用方式

在 script 中引用组件

import drawerFilterPanel from '@/components/ypeng-drawer-filter-panel/index';
export default {
    components: {drawerFilterPanel}
}

在 template 中使用组件

<drawer-filter-panel
    :filterShow="true"
    :filterParams="{}"
    :filterList="[]"
    @sureFilter="onSureFilter"
    @resetFilter="Filter"
    @hideFilter="onHideFilter"
    @tapItem="onTapItem"
    @tapItemAll="onTapItemAll"
>
    <!-- 自定义标题样式 -->
    <template v-slot:tit="{filter}">
        <view class="cateTit">{{filter.title}}</view>
    </template>
</drawer-filter-panel>

属性说明

filterList

事件说明

代码示例

data() {
    return {

        filterShow : false,

        filterParams : {
            fltd_type : [3],
            bxlx : ['value1'],
        },

        enrollPlanFilters : [{
            title : '分类投档',
            type : 'fltd_type',
            disableAll : true,
            items : [
                {
                    value: 1,
                    name: '不含分类投档'
                },{
                    value: 3,
                    name: '只看分类投档'
                },{
                    value: 2,
                    name: '包含分类投档'
                }
            ],
        },{
            title : "办学类型",
            type : "bxlx",
            items : [
                { name: "公办", value: "value1" },
                { name: "民办", value: "value2" },
                { name: "中外合作办学", value: "value3" },
                { name: "独立学院", value: "value14" },
                { name: "港澳台合作办学", value: "value5" },
            ],
        },{
            title : "高校层次",
            type : "gxcc",
            muti : true,
            items : [
                { name: "985工程", value: "value1" },
                { name: "一流大学学科高校", value: "value2" },
                { name: "211工程", value: "value3" },
                { name: "一流大学建设高校", value: "value4" },
                { name: "中央部委", value: "value5" },
                { name: "自主招生试点", value: "value6" },
                { name: "教育部直属", value: "value7" },
            ],
        },{
            title : "院校类型",
            type : "category",
            muti : true,
            items : [
                { name: "综合类", value: 0, },
                { name: "理工类", value: 1, },
                { name: "综合类6", value: 6, },
                { name: "综合类2", value: 2, },
                { name: "综合类3", value: 3, },
                { name: "综合类4", value: 4, },
                { name: "综合类8", value: 8, },
                { name: "综合类7", value: 7, },
                { name: "综合类9", value: 9, },
                { name: "综合类10", value: 10, },
                { name: "综合类11", value: 11, },
                { name: "综合类5", value: 5, },
                { name: "综合类12", value: 12, },
            ],
        }]

    }
},

methods: {
    onSureFilter(e){
        console.log(e);
        this.filterParams = e.filterParams;
        this.onHideFilter();
    },
    Filter(e){
        console.log(e);
    },
    onHideFilter(){
        this.filterShow = false;
    },
    onTapItem(e){
        console.log('点击选项：', e);
    },
    onTapItemAll(e){
        console.log('点击全选：', e);
    },
}