---

display: @rax-ui/filter-combo-container family: other

@rax-ui/filter-combo-container

用作 Filter 场景的业务组件组合容器，它只是一个滚动容器，包含 重置 和 确认选择按钮 和一些方法，内部渲染由 config 数组传递 子组件和 子组件props 来决定，详见 Demo

Feature

• 1、内部组件可动态扩展
• 2、容器统一封装，开发者无需关心容器实现，按照规范抛出结果即可
• 3、统一封装，必然有一些规范，规范如下

接入容器中的组件：规范约定

• 组件必须暴露 reset 重置选中值方法供容器调用：Function() => filterParam
• 组件必须暴露 getFilterParam 获取选中值方法供容器调用：Function() => filterParam
• 组件 onChange(filterParam) 回调函数返回形参 filterParam

// filterParam 格式
interface FilterParam {
  filterKey: string | number;
  filterText?: string;
  filterValue: any;
  // 和默认筛选值比较，筛选值是否变更
  filterValueChanged?: boolean;
}

预览图

API

Props

名称	说明	类型	默认值
styles	自定义样式	{ [key:string]: CSSProperties}	{}
config	组合的组件配置数组（Component 属性必传，此处用 多选组件）	Array	[]
filterKey	filterKey	String	'more'
resetButtonText	重置按钮文字	String	'重置'
confirmButtonText	确认按钮文字	String	'确定选择'
enableScroll	开启滚动	Boolean	true
iphonexCompatible	iPhoneX 兼容性处理	Boolean	true

这里的 MultiSelect写法规范就是 Filter.Panel 子组件书写规范，详见 @rax-ui/filter 组件文档

config = [
  {
    Component: MultiSelect, // Component必传，此处用 多选组件
    {...compProps} // 如下都是多选组件的 Props
  },
  {
    Component: MultiSelect, // Component必传，此处用 多选组件
    {...compProps} // 如下都是多选组件的 Props
  },
]

方法

名称	说明	类型	默认值
reset	重置内部选中状态	Function
rootRef	根节点 ref	Object

CSS API

名称	说明
container	外层容器样式(可通过此来设置 width, height)
body	中间内容样式
footer	底部样式
reset__button	重置按钮样式
reset__button__text	重置按钮文字样式
confirm__button	确认按钮
confirm__button__text	确认按钮文字样式
separator	分隔符样式