需求简介
- 根据条件筛选数据 当前一共4个条件 其中包含单选和多选（单选点击后直接去筛选，多选点击后需点击确定按钮提交筛选），由于移动端宽度有限，最多可放置三个条件栏，故最后两个条件放到更多筛选中 由确定按钮触发提交；
-
单选与多选对应不同条件及样式，说明图形如下：
筛选条件及选项.png
具体交互逻辑
- 清空和确定只控制当前条件，点击“清空”，条件恢复到上一次提交状态、点击“确定”，提交当前条件，其他选项条件保持不变，一同提交，点击页面其他区域，下拉框关闭，本次修改条件不提交；
- 各条件有默认选项（默认勾选），每次打开筛选下拉，自动勾选上一次提交的选项；
- 多选条件提交（确定按钮点击）后，上面条件栏文案相应变动，具体规则是：单选点击后 显示单选项文案；多选点击后 显示多选项文案（选全部除外，超过1个选项或文案超过4个字时后面以…显示）；
- 条件项点击的逻辑：每次只修改一个下拉框的条件（一般是一个，更多筛选中全部条件同步修改）；点击各条件项，切换对应下拉框内容；连续点击同一条件项，下拉框显示或隐藏；
- 选项点击的逻辑：多选项可选中或取消，只有一个选项被选中时不可取消，点击全部时 其他选项全部取消；单选项只能选中，不可取消，点击选中某选项 其他选项要取消勾选；
- 弹框的展示与隐藏：
- 点击顶部筛选栏，展示条件弹框；
- 点击条件弹框以外区域，关闭条件弹框（不提交）；
- 单选及多选提交后关闭弹框；
实现过程
筛选条件及选项下拉框抽出为单独组件，渲染时条件数据由外部页面传入，条件选项提交时由回调方法传出。
Dom设计
条件栏嵌入在页面顶部，fix布局；下拉选项弹框外面有一层遮罩（处理点击关闭事件），遮罩高度为100% 减去条件栏高度，下拉选项内容部分最大高度按设计要求设为75%（底部剩余25%内容可点击关闭）
JS交互处理
- 初始进入，带入默认条件
conditionSetDefault 方法，获取传入的条件列表，并比较默认条件，将默认条件的selected值置为true - 点击筛选栏，若当前筛选项未被选中展示弹框：变量控制弹框show或hide， 同时条件数据展示未对应筛选项内容（根据currentConditionInd展示不同dom，与当前点击的筛选项对应），且当前点击的筛选项高亮（比较currentConditionInd与筛选项顺序的索引值）；
若当前筛选已被点击，则关闭弹框，调用closeDialog - 点击弹框外区域，弹框关闭 closeDialog
-点击单选，当前条件下其他选项取消选中，当前选项selected置为true,若非更多条件内单选 传出全部条件，调用提交方法回调，否则点击确定时提交； - 点击多选，当前选项被选中或取消勾选selected取反并统计选中项数量，只有一个条件被选中，当前条件的selected始终未true；
- 点击清空（多选及更多筛选），根据currentConditionInd 查找当前条件数据，置为初始值；
- 点击确定，获取所有条件数据传出，调用callBack提交接口请求
网友评论