这篇文章主要介绍了Vue怎么实现新国标红绿灯效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue怎么实现新国标红绿灯效果文章都会有所收获，下面我们一起来看看吧。组件化开发是我们一贯的风格。如何进行这个红绿灯组件的设计呢？从上图可以看出我对新国标红绿灯的组件拆分。lamp 代表每个灯，在上图中一共有9个灯，分别是左转三个颜色的灯、直行三个颜色的灯、右转三个颜色的灯。这 9 个灯的区别是颜色和内部的箭头，而内部的箭头与车辆行驶方向（左转、右转、直行）有关，故颜色和方向可定义为属性，由外部传递。图中一共有三个 lamp-group，每个行驶方向的三个颜色的灯组成一个 lamp-group。同样的，lamp-group 有一个属性为方向，该属性表示左转、直行或右转。此外，每个 lamp-group 中最多只有一个灯亮，故可以定义一个属性为状态，表示这个 lamp-group 中哪个灯亮、或者都不亮。traffic-lamp 表示整个新国标红绿灯。有三个 lamp-group 组成。整个红绿灯也需要一个状态属性，描述三个方向的 lamp-group 的状态。在 src/assets/ 中创建目录 scss，并在该目录下创建样式变量文件 traffic-lamp-common.scss，在该文件中定义红黄绿颜色、间距等常见样式，便于全局保持一致。由于咱 demo 较小，将 scss 变量与通用样式定义在一起就可以了，如果在正式开发中，要遵守 CSS 架构规范，无论是 ITCSS 还是 SMACSS。src/assets/scss/traffic-lamp-common.scss：创建 src/common/traffic-lamp-common.ts，在该文件中定义两个枚举类，分别是行驶方向（左、直、右）和灯的状态，O – off 表示灯不亮。由于灯里面有左箭头、右箭头两个图标，故从 iconfont 上搜索并下载这两个图标，优雅哥采用 iconfont 的方式使用图标，资源文件位于 src/assets/iconfont 下。在 main.ts 中引入iconfont：在 src/components 目录下创建目录 traffic-lamp，上面分析的三个组件就在该目录下开发。lamp.vue：可以在测试页面测试：lamp-group 组免费云主机域名件中容纳了三个 lamp，分别是红灯、黄灯、绿灯。lamp-group.vue：可以在测试页面测试该组件：traffic-lamp 组件容纳三个 lamp-group，分别代表左转、直行、右转。其中属性 status 要代表三个 group 的状态，父组件在使用时可以用逗号分隔。在设计的时候，也可以将状态拆分为三个属性，每个方向对应一个状态。traffic-lamp.vue：可以在测试页面测试该组件：到这里为止，交通灯功能就模拟实现完成了，切换交通灯红绿灯状态时，只需要改变 status 即可。现在咱额外新增一个功能，新国标有 8 种状态，咱就让这 8 种状态自动切换。下列所有代码都编写在测试页面中。在测试页面中使用 traffic-lamp 组件。在测试页面中定义 8 种状态列表：在测试页面中定义遍历状态列表的索引：在模板中动态设置 traffic-lamp 的 status 属性：在测试页面 onMounted 生命周期函数中，定时修改索引 currentIndexRef 的值，从而实现红绿灯的自动切换：可以在红绿灯下面添加是否可以通行的文字描述。模板：TS 代码：样式：运行如下：关于“Vue怎么实现新国标红绿灯效果”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue怎么实现新国标红绿灯效果”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注百云主机行业资讯频道。
相关推荐: SpringBoot整合rockerMQ消息队列的方法
这篇文章主要介绍“SpringBoot整合rockerMQ消息队列的方法”，在日常操作中，相信很多人在SpringBoot整合rockerMQ消息队列的方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”SpringBoot整合r…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
