当前组件支持

单选 多选 和金额区间设置

使用步骤 

① 引入组件到页面

import jyFilter from "@/components/jy-filter/filter.vue";

② 注册组件到页面 

components: {
    jyFilter
},

③ 在布局代码中添加 并设置 ref 方便JS代码调用 添加回调函数 回到主界面完成相关逻辑 

<jyFilter ref="jyFilter" @callback="jyFilterCallBack"></jyFilter>

④ 在 onReady 声明周期初始化相关参数 filters支持自定义多个筛选类型 支持单选和多选 

onReady(){
    this.$refs.jyFilter.initData({'filters':this.filters});
},

⑤ 处理回调事件

jyFilterCallBack(data){
    //返回的数据处理
    var arr = new Array();
    for (var i = 0; i < data.filters.length; i++) {
        for (var k = 0; k < data.filters[i]['list'].length; k++) {
            if (data.filters[i]['list'][k].checked==true) {
                arr.push(data.filters[i]['list'][k].name);
            }
        }
    }
    //拼接组装数据
    if (arr.length>0) {
        this.describes = arr.join(',');
    } else {
        this.describes = '';
    }
    //重新刷新当前界面
    this.refresh();
}

⑥ 在触发按钮之后打开该界面

<view @tap="showFilter"  class="fl margin-left-sm margin-top-sm"  >
    <view class="cu-tag round bg-white" style="width: 120upx;">筛选<text class="text-gray margin-left-xs"> ▼</text></view>
</view>

showFilter(e){
    this.$refs.jyFilter.showUI();
}

组件下载地址