百度前端技术学园

# 综合大作业基础版(四)

# 课程目标

  • 在上一任务基础上继续 JavaScript 的实践，封装学校输入组件

# 阅读

# 任务

第四步：按照 ife_2021_st_04.jpg (opens new window) 所示，实现选择学校面板，需求包括：

  1. 学校输入框变成非输入框区域（同样称之为 选择结果区域），默认为一种让选择的友好提示，不做默认选项选择。默认样式同前几步该部分样式
  2. 当鼠标移动进入“选择结果区域”时，弹出学校选择面板，选择结果区域样式发生改变（变为图中所示）。
  3. 弹出面板中包含左右两个部分，左侧的省市选择，及右侧的院校选择；左侧选中某个省市时，右侧的院校 List 会联动发生改变，只显示该省市下的院校。
  4. 当已经有选择某个院校时，对应选择的省市加强显示，并且保证显示在界面上（tip：当省市列表过长时，当前选择的学校所在省市靠后时，需要调整左侧的滚动高度，可以考虑从体验层面，所选省市显示在什么位置比较合适）；同理，选择的院校 并且弹出面板中和选择结果区域值一样的部分加强显示，并且保证显示在可视区域内；
  5. 出于实现角度考虑，省市及院校可虚构数据，省市请保证至少 10 个，至少有 1 个省市包含的院校超过 20 个。（但请注意虚构数据不违反国家法律法规政策）
  6. 选择完成和选择面板消失的逻辑同第三步
  7. 请注意类似圆角、阴影等细节样式，按照设计图中实现
  8. 【可选】酌情按体验实现面板出现和消失的动效
  9. 将第三步和第四步的弹层做一个组件的封装

← 综合大作业基础版(五) →