Vue 3-150行代码 实现红绿灯效果实操案例

昨天刷视频，都是关于新版红绿灯的，看大家议论纷纷，下班就用150行代码通过Vue组件实践红绿模拟演示，视频也跟大家展示过了。今天接着更新图文版本，大家跟着优雅哥通过该案例实操模拟一下。

不过新版红绿灯的设计，这个专业性、逻辑性、艺术性就是厉害，三个方向 x 三种颜色，玩转九宫格。大部分场景都可以不加思考就知道应该通行或者等待，只有某些情况下对应行驶方向的灯不亮时，才需要 if … else … 判断。优雅哥比较脑残，无论哪个方向：左转、直行、右转，如果灯都亮着，不就可以一眼看出能否通行了吗，对应方向红灯就停、绿灯就通行，这样是不是就可以不需要思考了？或许专家是为了省电吧，三个方向都亮灯太费电了。
后面得知，关于新版红绿灯信息是误传，以上说辞纯属个人当时根据信息的一些看法，请大家不要误以为真。

现在来说说作为程序员，咱就用 Vue3 来模拟新国标红绿灯玩一玩。

1 组件分析

组件化开发是我们一贯的风格。如何进行这个红绿灯组件的设计呢？

从上图可以看出我对新国标红绿灯的组件拆分。

1.1 lamp

lamp 代表每个灯，在上图中一共有9个灯，分别是左转三个颜色的灯、直行三个颜色的灯、右转三个颜色的灯。这 9 个灯的区别是颜色和内部的箭头，而内部的箭头与车辆行驶方向（左转、右转、直行）有关，故颜色和方向可定义为属性，由外部传递。

1.2 lamp-group

图中一共有三个 lamp-group，每个行驶方向的三个颜色的灯组成一个 lamp-group。同样的，lamp-group 有一个属性为方向，该属性表示左转、直行或右转。此外，每个 lamp-group 中最多只有一个灯亮，故可以定义一个属性为状态，表示这个 lamp-group 中哪个灯亮、或者都不亮。

1.3 traffic-lamp

traffic-lamp 表示整个新国标红绿灯。有三个 lamp-group 组成。整个红绿灯也需要一个状态属性，描述三个方向的 lamp-group 的状态。

2 全局文件定义

2.1 样式变量

在 src/assets/ 中创建目录 scss，并在该目录下创建样式变量文件 traffic-lamp-common.scss，在该文件中定义红黄绿颜色、间距等常见样式，便于全局保持一致。由于咱 demo 较小，将 scss 变量与通用样式定义在一起就可以了，如果在正式开发中，要遵守 CSS 架构规范，无论是 ITCSS 还是 SMACSS。

src/assets/scss/traffic-lamp-common.scss：

$red: #e42621;
$yellow: #eecd48;
$green: #59e02e;

$commonPadding: 10px;
$commonMargin: 10px;
$lampSize: 80px;
$radius: 8px;

.red {
  color: $red !important;
}
.yellow {
  color: $yellow !important;
}
.green {
  color: $green !important;
}
.bg-red {
  background-color: $red !important;
}
.bg-yellow {
  background-color: $yellow !important;
}
.bg-green {
  background-color: $green !important;
}

2.2 常量定义

创建 src/common/traffic-lamp-common.ts，在该文件中定义两个枚举类，分别是行驶方向（左、直、右）和灯的状态，O - off 表示灯不亮。

export enum Direction {
   
  L = 'left',
  C = 'center',
  R = 'right'
}
export enum Status {
   
  R = 'red',
  Y = 'yellow',
  G = 'green',
  O = 'off'
}

2.3 导入资源

由于灯里面有左箭头、右箭头两个图标，故从 iconfont 上搜索并下载这两个图标，优雅哥采用 iconfont 的方式使用图标，资源文件位于 src/assets/iconfont 下。在 main.ts 中引入iconfont：

import '@/assets/iconfont/iconfont.css'

3 组件开发

在 src/components 目录下创建目录 traffic-lamp，上面分析的三个组件就在该目录下开发。

3.1 实现 lamp 组件

lamp.vue：

<template>
  <div class="lamp" :class="colorClass">
    <span v-if="direction === Direction.L" class="iconfont icon-left"></span>
    <span v-if="direction === Direction.R" class="iconfont icon-right"></span>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineProps, PropType } from 'vue'
import { Direction, Status } from '@/common/traffic-lamp-common'

const props = defineProps({
  direction: {
    type: String as PropType<Direction>,
    required: true
  },
  color: {
    type: String as PropType<St