@mas.io/mas-csj-searchfilter NPM

安装

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

mini-ali-ui @mas.io/falcon-core @mas.io/any-style

@infinitebrahmanuniverse/nolb-_mas @everything-registry/sub-chunk-583

0.1.4

4 years ago