安装
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
