转行小白历险记-2023/11/26 饿了么搜索组件开发

知识点.search搜索组件开发

• 如何设计一个组件
• 使用defineEmits 定义组件的事件
• 如何定义组件的 v-mode
• 如何使用 CSS变量
• BEM命名规范

1.需求分析 

2.自定义内容可以通过props定义

2.1自定义事件的背景接口

// 自定义背景、形状等自定义事件的接口
interface Iprops {
  showAction?: boolean
  background?: string
  placeholser?: string
  shape?: string
  modelVaule: string | number
}
const props = defineProps<Iprops>()

2.2自定义事件

// 按回车取消搜索
const onKeypress = (e: KeyboardEvent) => {
  const ENTER_CODE = 13
  if (e.KeyCode === ENTER_CODE) {
    e.preventDefault()
    emits('search', props.modelVaule)
  }
}
// 点击取消出发取消事件
const onClear = () => {
  emits('update:modelVaule', '')
  emits('clear')
}

2.3动态绑定样式和类名

  <div class="op-search" :class="{ 'op-search--show-action': showAction }" :style="{ background }">

3.scss学习

相关学习链接：(1w字)爆肝三天，学习Scss-看这篇就够了 - 掘金 (juejin.cn)

1. 变量 (Variables)

在 SCSS 中，你可以定义变量来存储颜色、字体大小等，以便在整个样式表中重复使用这些值。这有助于维护和修改代码。

$primary-color: #ff5733;
$font-stack: Helvetica, sans-serif;

body {
  color: $primary-color;
  font: 100% $font-stack;
}

2. 嵌套 (Nesting)

SCSS 允许你将 CSS 规则嵌套在另一个规则内部。这可以帮助你以更结构化的方式编写 CSS，使其更接近 HTML 的结构。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

3. 部分文件和导入 (Partials and Import)

你可以将 SCSS 代码拆分成多个小文件（称为“部分”），然后使用 @import 指令将它们导入到主文件中。这有助于组织和维护大型样式表

// _reset.scss
html,
body,
ul,
ol {
   margin: 0;
   padding: 0;
}

// main.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

4. 混合 (Mixins)

混合可以让你创建可重用的代码片段。你可以将一组 CSS 声明打包在一起，并在样式表中的任何位置重复使用这些声明。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box { @include border-radius(10px); }

混合更像是封装了一组样式声明的“函数”，而不仅仅是单个值的变量。你可以用 @include 来“调用”这个“函数”

5. 继承 (Inheritance)

SCSS 的继承功能允许你从另一个选择器继承一组属性。这有助于减少重复的代码。

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success-message {
  @extend .message;
  border-color: green;
}

6. 运算 (Operators)

SCSS 允许你在样式表中进行数学运算，如加法、减法、乘法和除法，这对于动态计算尺寸非常有用。

.container { width: 100%; }
.article { width: 600px / 960px * 100%; }

7. 条件语句和循环 (Conditionals and Loops)

SCSS 提供了控制指令，如 @if, @for, @each, 和 @while，让你可以编写更动态和复杂的样式。

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

    7.1. @if

• @if 指令用于根据条件包含一块样式。
• 如果条件为真，则执行 @if 块内的代码；可以与 @else if 和 @else 结合使用。
• 类似于其他编程语言中的 if-else 语句。
• 例子

• $type: light;
  
  .button {
    @if $type == light {
      background-color: white;
      color: black;
    } @else {
      background-color: black;
      color: white;
    }
  }
  

  7.2. @for

• @for 指令用于根据指定的起始和结束值进行循环。
• 可以生成一系列样式规则或复用代码。
• 类似于其他编程语言中的 for 循环。
• 例子：

• @for $i from 1 through 3 {
    .item-#{$i} { width: 100px * $i; }
  }
  

  7.3. @each

• @each 指令用于遍历列表或映射中的每个项，并对每个项执行代码块。
• 类似于其他编程语言中的 foreach 循环。
• 例子：

• $colors: red, green, blue;
  
  @each $color in $colors {
    .#{$color}-text { color: $color; }
  }
  

  7.4. @while

• @while 指令用于重复执行代码块，直到条件不再为真。
• 类似于其他编程语言中的 while 循环。
• 通常用于当你不知道循环需要执行多少次时。
• 例子：

• $i: 1;
  
  @while $i < 10 {
    .item-#{$i} { width: 10px * $i; }
    $i: $i + 1;
  }