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