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

本文链接：https://blog.csdn.net/TTTT2222111/article/details/134910604

一、复盘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 事件是在 <script> 部分定义的，使用 Vue 3 的 defineEmits 函数。这个函数定义了组件可以发出的自定义事件，并且可以与父组件进行通信。通过这种方式，您的组件可以在特定动作发生时通知父组件

定义 `emits` 事件

在 <script setup> 部分，您可以这样定义 emits 事件：

<script setup lang="ts">
import { defineEmits } from 'vue'

// 定义可以发出的事件
const emits = defineEmits({
  'search': null,
  'cancel': null,
  'clear': null,
  'update:modelValue': null,
  'inputClick': null
})
</script>

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

<script setup lang="ts">
import { defineEmits } from 'vue'

interface IEmits {
  (e: 'search', value?: string | number): void;
  (e: 'cancel'): void;
  (e: 'clear'): void;
  (e: 'update:modelValue', value: string | number): void;
  (e: 'inputClick'): void;
}

const emits = defineEmits<IEmits>()
</script>

使用 `emits` 触发事件

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

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

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

在父组件中监听事件

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

<template>
  <OpSearch
    @search="handleSearch"
    @cancel="handleCancel"
    @clear="handleClear"
    @update:modelValue="handleModelValueUpdate"
    @inputClick="handleInputClick"
  />
</template>

每个事件处理器如 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;
}