安装

tnpm install --save @alipay/mas-csj-searchfilter

组件介绍

行业小程序选择过滤器Filter组件，结合mini-ali-ui的组件样式，针对支付宝行业在穿山甲项目中，提供的过滤条件选择的组件。

参数说明

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: --- | --- | --- | --- | --- | -- list | 是 | Array | 数组元素设置filter内部的title和items | [] | 参考下面数据示例，item中的value值在同一个key对应的一位数组中唯一，区分数据的主键 value | 否 | Array | 数组元素，取值范围在items中每个item的value值中，表示当前选中的项目，不设置时为非受控状态 | undefined | 设置值后需要配合onChange进行使用， { ticketType: [0], startStation: [1], startTime: [3] } onFilterConfirm | 否 | Function | 用户选中过滤项目后，点击确认的时的回调 onFilterReset | 否 | Function | 用户重置选择项目的回调 onChange | 否 | Function | 用户点击filter-item后的回调，返回当前整体选择的数据内容

在小程序中使用

{
  "usingComponents": {
    "mas-csj-searchfilter": "@alipay/mas-mas-csj-searchfilter/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
list = [
  {
    title: '车次类型',
    key: 'ticketType',
    items: [{
      value: 1,
      desc: '高铁/动车',
    }, {
      value: 2,
      desc: '普通车',
    }],
  },
  {
    title: '出发车站',
    key: 'startStation',
    items: [{
      value: 1,
      desc: '北京南',
    }, {
      value: 2,
      desc: '北京',
    }],
  },
  {
    title: '到达车站',
    key: 'arrivalStation',
    items: [{
      value: 1,
      desc: '上海虹桥',
    }, {
      value: 2,
      desc: '上海',
    }, {
      value: 3,
      desc: '上海南',
    }],
  },
  {
    title: '出发时间',
    key: 'startTime',
    items: [{
      value: 1,
      desc: '0点-6点',
    }, {
      value: 2,
      desc: '6点-12点',
    }, {
      value: 3,
      desc: '12点-18点',
    }],
  },
]
 <mas-csj-searchfilter
    ...
    list="{{list}}"
    ...
  />

Badges

[![install size][install-size-image]][install-size-url]