如何用Vue实现新国标红绿灯效果并详细讲解其实现过程？

本文共计2666个文字，预计阅读时间需要11分钟。

目录引言

1.组件分析

1.1 lamp 1.2 lamp-group 1.3 traffic-lamp

2.全局文件定义

2.1 样式变量 2.2 常量定义 2.3 资源导入

3.组件开发

3.1 实现lamp组件 3.2 实现lamp-group组件 3.3 实现traffic-lamp组件

目录

• 引言
• 1 组件分析
• 1.1 lamp
• 1.2 lamp-group
• 1.3 traffic-lamp
• 2 全局文件定义
• 2.1 样式变量
• 2.2 常量定义
• 2.3 导入资源
• 3 组件开发
• 3.1 实现 lamp 组件
• 3.2 实现 lamp-group 组件
• 3.3 实现 traffic-lamp 组件
• 4 附加功能
• 4.1 状态数组
• 4.2 定义索引
• 4.3 自动切换
• 4.4 文字描述

引言

昨天刷视频，都是关于新国标红绿灯的，看大家议论纷纷，下班就用150行代码通过Vue组件实践红绿模拟演示，视频也跟大家展示过了。