【九月打卡】第11天+学习企业级复杂前中台项目响应式处理方案

课程名称：基于Vue3，打造前台+中台通用提效解决方案
课程章节：第8章 企业级复杂前中台项目响应式处理方案 —— 一套代码多端共用
主讲老师：Sunday
课程链接：https://coding.imooc.com/class/chapter/577.html#Anchor

课程内容：

今天学习的内容包括：

• 响应式下navigationBar实现方案分析
• 抽离公共逻辑，封装系列动作
• PC端navigationBar私有试图处理

课程收获：

处理pc端业务架构

• header区域

• 中心区

  • 动态高度 tailwind实现
    • 自定义

• 悬浮窗口

pc段header模块分析与实现

• 分析
  • logo
  • search框
  • theme 主题
  • 信息区域

search 搜索框分析

• 常见功能
  • 封装成中台组件
    • 主要能力
      • 输入内容实现双向数据绑定
      • 鼠标移入与获取焦点的动画
      • 一键清空文本的功能
      • 搜索触发功能
      • 可控制，可填充的下拉展示区
      • 监听到一下事件列表
        • clear： 删除所有文本事件
        • input： 输入事件
        • focus： 获取焦点事件
        • blur ： 市区焦点事件
        • search： 触发搜索（点击或者回车）事件

search搜索框样式处理

• 子元素监听父元素hover
  • group

button按钮分析

• 功能
  • 可以显示文字按钮，并提供loading能力
  • 可以显示icon按钮，并可以指定icon颜色
  • 可开关的点击动画
  • 可以指定各种样式风格和大小
  • 当指定的风格或大小不符合预设，需要给开发者以提示消息

button按钮实现-1

• 步骤
  • 构建type风格可选项和size大小可选项
    • 单独分割script来编写
  • 通过props 让开发者控制
    • props错误拦截
  • 区分icon button 和text button
    • 手工写计算属性来添加icon-
  • 依据当前的数据，实现试图
  • 处理点击事件

完善search基本能力

1. 输入内容实现双向绑定
2. 搜索按钮在hover是展示
3. 一键清空文本功能
4. 触发搜索
5. 控制下拉展示区的展示
   1. onClickOutside来处理dom元素外的点击事件
6. 事件处理
   1. 手工绑定信号

popover气泡卡片能力分析

1. 两个插槽
   1. 具名插槽
   2. 匿名插槽
2. 可以定义弹出区域

popover气泡卡片基础功能实现

1. 具名插槽
   1. name = reference
2. 匿名插槽
   1. +vue3特效
   2. vue3没有跟组件可能有异常
3. 触发
   1. 鼠标移入
   2. 鼠标移除

popver功能衍生，控制气泡展示位置

1. 指定所有可选位置的常量，并生成enum
2. 通过prop控制指定位置
3. 获取元素的dom，创建读取元素尺寸的方法
4. 生成气泡的样式对象，用来控制每个位置对应的样式
5. 根据prop，计算样式对象
   1. vue在数据改变之后，需要等待一段时间DOM才会发生变化
      1. nextTick

处理慢速移动，气泡消失问题

• 两个slot直接由距离
  • 用防抖解决（防抖的实践）

基于popover处理用户模块

• 何上面一样实现

课程学习截图