更新记录

1.0.4(2020-12-09)

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

1.0.3(2020-09-11)

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

查看更多

筛选面板

筛选面板。组件名: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="onResetFilter"
    @hideFilter="onHideFilter"
    @tapItem="onTapItem"
    @tapItemAll="onTapItemAll"
>
    <!-- 自定义标题样式 -->
    <template v-slot:tit="{filter}">
        <view class="cateTit">{{filter.title}}</view>
    </template>
</drawer-filter-panel>

属性说明

属性名 类型 默认值 说明
filterShow Boolean false 控制筛选面板显示
filterParams Object {} 初始筛选参数,属性名对应为filterList.type值,值对应为items中已选的value数组
filterList Array [] 筛选面板列表数据
moveFrom String '' 默认从右往左, 可选值“left”
popWidth Number 560 单位rpx
mask Boolean true 是否显示遮罩
maskClosable Boolean true 是否允许点击遮罩关闭

filterList

属性名 类型 默认值 说明
title String - 选项组名称,也可通过v-slot:tit 自定义标题
type String - 选项组类型,将根据此字段返回已选择的value数组
muti Bollean false 是否多选
disableAll Boolean false 是否禁用全部按钮,默认追加全部选项
items Array [] 选项列表,包含name 和 value字段,name为显示的名称

事件说明

事件名 说明 返回值
sureFilter 点击触发确定按钮 返回对象{filterParams},filterParams为选择的设置
resetFilter 点击触发重置按钮 返回对象{filterParams},filterParams为初始值
hideFilter 触发了隐藏事件 -
onTapItem 监听点击选项 返回对象{item: Object, filterParams: Object, filterIndex: Number, index: Number},filterIndex 为选项组索引,item为选项的数据
onTapItemAll 监听点击全选 返回对象{item: Object, filterParams: Object, filterIndex: Number, index: Number},filterIndex 为选项组索引

代码示例

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();
    },
    onResetFilter(e){
        console.log(e);
    },
    onHideFilter(){
        this.filterShow = false;
    },
    onTapItem(e){
        console.log('点击选项:', e);
    },
    onTapItemAll(e){
        console.log('点击全选:', e);
    },
}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问