https://github.com/future-team/ph-filter
下拉筛选组件（app端，基于phoenix-ui的组件）
https://github.com/future-team/ph-filter
Last synced: 23 days ago
JSON representation
下拉筛选组件（app端，基于phoenix-ui的组件）
- Host: GitHub
- URL: https://github.com/future-team/ph-filter
- Owner: future-team
- License: mit
- Created: 2016-07-08T09:43:41.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2017-10-30T08:00:13.000Z (over 8 years ago)
- Last Synced: 2025-09-21T07:47:36.025Z (10 months ago)
- Language: JavaScript
- Size: 319 KB
- Stars: 0
- Watchers: 9
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE-MIT
Awesome Lists containing this project
README
# ph-filter
Filter 使用方法
```jsx
美食}>
全部美食
本帮江浙菜
日本菜
咖啡厅
全部电影
私人影院
电影院
全部购物
服饰鞋包
药店
眼镜店
花店
世纪公园
陆家嘴
八佰伴
浦东新区
```
FilterCheckbox 拓展组件用法
```jsx
...
onSubmit(data){
console.log(data);
}
...
const chooseData = "3244945,13893492,5687880,18418332,6210703,24890244"; // string
const filterData = shopList.msg.cityShopList;
return(
{
filterData.map((cityShopList,index)=>{
return (
{
cityShopList.shopInfoDTOList.map((shopInfo)=>{
return (
{shopInfo.shopName}
);
})
}
);
})
}
)
```
## 注意事项
- 目前支持两种Panel，一级选择：PanelSimple 和 二级选择：Panel
- Panel全部嵌套在FilterContainer里，有几个panel，cat栏目就会被几等分
- 当使用Panel时，即表明该Panel是个二级选择Panel，所有的二级分类都会被ItemGroup标签包裹，itemGroup用于切换二级分类列表
## API
View [example](/example/src/index.js) to get more details
#### `` Props:
- onChange 用户切换分类的时候触发的回调函数，输入参数是分类的key .
- hideCat 当设置hideCat属性的时候，cat那一栏会隐藏，第一个panel会一直显示（适用于只有一个panel并且不需要cat的场景）
#### ``和 `` Props:
- default 当用户没有选择任何分类的时候，cat栏目里显示的默认文案 .
- readOnly 是否为只读模式 .
- selected 用户选择的分类对象，必须包含key和value属性{key:'s_flower',value:'花店'}，用于高亮panel里对应的项.
#### `` Props:
- itemKey item的唯一标识，必填参数 .
#### `` Props:
- label 一级分类的显示文案，用于包裹二级分类列表，可以是string，也可以是react标签 .
### Contributing
- Fork the project
- Run the project in development view demo: `$ npm run demo`
- Make changes.
- Add appropriate tests
- `$ npm run test`
- If tests don't pass, make them pass.
- Update README with appropriate docs.
- Rnn build
- `$ npm run build`
- Commit and PR.
## Repair
`version 1.0.2` 增加choose的数据是通过请求获取的情况兼容
`version 1.0.1` 修复没有choose时数据多一个逗号的问题
`version 1.0.0` 新增FilterCheckbox拓展组件
`version 1.0.4` FilterCheckbox右边栏可横向滚动