转行小白历险记-2023/12/10 代码复盘

一、复盘11.26写过的2023/11/26 饿了么搜索组件开发组件

• 转行小白历险记-2023/11/26 饿了么搜索组件开发-CSDN博客
• Vue 组件 OpSearch 是一个定制的搜索输入框，具有自定义的样式和行为。这个组件主要处理用户输入、搜索确认、清除输入以及发出相关事件
• 组件需要实现的功能如下图所示

 

1. 接收 Props

组件接收几个可选的 props，用于定制其外观和行为：

• showAction: 是否显示搜索操作（比如取消按钮）。
• background: 定制背景色。
• placeholder: 输入框的占位符文本。
• shape: 搜索框的形状。
• modelValue: 双向绑定的值，通常用于 v-model。

2. 定义 Emits

组件定义了可发出的事件：

• search: 当用户按下回车键时触发。
• cancel: 当用户点击取消时触发。
• clear: 当清除搜索内容时触发。
• update:modelValue: 用于更新 v-model 绑定的值。
• inputClick: 当用户点击输入框时触发。

emits 事件是在

 或者使用 TypeScript 接口定义更明确的事件类型：

 使用 emits 触发事件

在组件内部，您可以使用 emits 函数来触发这些事件。例如，当用户点击输入框时，可以这样触发 inputClick 事件：

const onInputClick = () => {
  emits('inputClick');
}

 类似地，您可以在其他适当的方法内触发 search, cancel, clear, 和 update:modelValue 事件。

在父组件中监听事件

在父组件中使用此组件时，您可以监听这些事件：

 每个事件处理器如 handleSearch、handleCancel 等都对应于 OpSearch 组件发出的相应事件。

3. 搜索逻辑

• onKeypress: 监听键盘事件，当用户按下回车键（Enter）时，阻止默认行为并发出 search 事件。
• onClear: 清除搜索框内容并发出 clear 事件。

4. 模板结构

模板中定义了搜索框的 HTML 结构：

• 外层 div 使用 show-action 和 background props 来控制样式。
• input 元素绑定了 modelValue，监听 keypress、click 和 input 事件。
• VanIcon 用于显示搜索和清除图标。
• slot 允许在组件中插入自定义内容，如右侧的图标或按钮。

5. 样式定义

使用 SCSS 为搜索组件定义样式，包括外观和布局。

:root 选择器被用来定义一组 CSS 自定义属性（也称为 CSS 变量）

:root {
  --op-search-padding: 10px var(--van-padding-sm);
  --op-search-background-color: var(--van-background-color-light);
  --op-search-content-background: var(--van-gray-1);
  --op-search-left-icon-color: var(--van-gray-6);
  --op-search-action-padding: 0 var(--van-padding-xs);
  --op-search-action-text-color: var(--van-text-color);
  --op-search-action-font-size: var(--van-font-size-md);
  --op-search-input-height: 34px;
}

组件逻辑总结

OpSearch 组件是一个具有丰富功能的搜索输入组件，它不仅处理用户的输入和交互事件，而且还允许通过 props 进行高度定制。通过发出不同的事件，它可以与父组件或其他组件轻松地进行通信，从而集成到更大的应用中。

二、 自定义hooks-useAsync 实现请求处理

1.  Promise then 和 catch 的处理
2. TS声明复杂的类型结构
3. 使用isonserver 中间件延时返回数据

需求分析

1. 新建一个 fetchHomePageData 的 api
2. 实现 useAsync，将 api 包裹一层，处理 Promise 的状态