Vue 实现新国标红绿灯效果实例详解

目录
  • 引言
  • 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组件实践红绿模拟演示,视频也跟大家展示过了。今天接着更新图文版本,大家跟着优雅哥通过该案例实操模拟一下。

不过新国标红绿灯的设计,这个专业性、逻辑性、艺术性就是厉害,三个方向 * 三种颜色,玩转九宫格。

大部分场景都可以不加思考就知道应该通行或者等待,只有某些情况下对应行驶方向的灯不亮时,才需要 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<Status>,
    required: false,
    default: Status.O
  }
})
const colorClass = computed(() => {
  if (!props.color) {
    return ''
  }
  return `${props.direction}` === Direction.C ? `bg-${props.color}` : props.color
})
</script>
<style scoped lang="scss">
@import "~@/assets/scss/traffic-lamp-common.scss";
.lamp {
  width: $lampSize;
  height: $lampSize;
  line-height: $lampSize;
  background-color: #0e0e0e;
  margin: 5px;
  border-radius: 50%;
  text-align: center;
  color: gray;
  .iconfont {
    font-size: $lampSize - 10px;
    font-weight: bolder;
  }
}
</style>

可以在测试页面测试:

<lamp direction="left" color="green"></lamp>

3.2 实现 lamp-group 组件

lamp-group 组件中容纳了三个 lamp,分别是红灯、黄灯、绿灯。

lamp-group.vue

<template>
  <div class="lamp-group" :class="{
    'radius-left': direction === Direction.L,
    'radius-right': direction === Direction.R}">
    <div class="wrapper">
      <lamp :direction="direction" :color="status === Status.R ? status : Status.O" />
      <lamp :direction="direction" :color="status === Status.Y ? status : Status.O" />
      <lamp :direction="direction" :color="status === Status.G ? status : Status.O" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, PropType } from 'vue'
import Lamp from './lamp.vue'
import { Direction, Status } from '@/common/traffic-lamp-common'
defineProps({
  direction: {
    type: String as PropType<Direction>,
    required: true
  },
  status: {
    type: String as PropType<Status>,
    required: false,
    default: Status.O
  }
})
</script>
<style scoped lang="scss">
@import "~@/assets/scss/traffic-lamp-common.scss";
.lamp-group {
  background-color: #777;
  margin: 0 10px;
  padding: 10px;
  .wrapper {
    background-color: #5d5d5d;
    padding:5px;
  }
}
.radius-left {
  border-radius: $radius 0 0 $radius;
}
.radius-right {
  border-radius: 0 $radius $radius 0;
}
</style>

可以在测试页面测试该组件:

<lamp-group direction="right" status="green" />

3.3 实现 traffic-lamp 组件

traffic-lamp 组件容纳三个 lamp-group,分别代表左转、直行、右转。其中属性 status 要代表三个 group 的状态,父组件在使用时可以用逗号分隔。在设计的时候,也可以将状态拆分为三个属性,每个方向对应一个状态。

traffic-lamp.vue

<template>
  <div class="traffic-lamp">
    <lamp-group :direction="Direction.L" :status="statusList[0] || Status.O" />
    <lamp-group :direction="Direction.C" :status="statusList[1] || Status.O" />
    <lamp-group :direction="Direction.R" :status="statusList[2] || Status.O" />
  </div>
</template>
<script lang="ts" setup>
import { computed, defineProps } from 'vue'
import LampGroup from './lamp-group.vue'
import { Status, Direction } from '@/common/traffic-lamp-common'
const props = defineProps({
  status: {
    type: String,
    required: false,
    default: ''
  }
})
const statusList = computed(() => {
  const list = props.status.split(',')
  const remain = 3 - list.length
  for (let i = 0; i < remain; i++) {
    list.push(Status.O)
  }
  return list
})
</script>
<style scoped lang="scss">
.traffic-lamp {
  display: flex;
}
</style>

可以在测试页面测试该组件:

<traffic-lamp status="red,red"></traffic-lamp>

4 附加功能

到这里为止,交通灯功能就模拟实现完成了,切换交通灯红绿灯状态时,只需要改变 status 即可。

现在咱额外新增一个功能,新国标有 8 种状态,咱就让这 8 种状态自动切换。

下列所有代码都编写在测试页面中。在测试页面中使用 traffic-lamp 组件。

4.1 状态数组

在测试页面中定义 8 种状态列表:

const { R, G, O } = Status
const statusList = [
  `${R},${R},${R}`,
  `${R},${R},${O}`,
  `${G},${R},${R}`,
  `${O},${R},${O}`,
  `${R},${G},${R}`,
  `${O},${G},${R}`,
  `${R},${G},${O}`,
  `${O},${G},${O}`
]

4.2 定义索引

在测试页面中定义遍历状态列表的索引:

const currentIndexRef = ref(0)
const currentStatus = computed(() => statusList[currentIndexRef.value])

在模板中动态设置 traffic-lamp 的 status 属性:

<traffic-lamp :status="currentStatus"></traffic-lamp>

4.3 自动切换

在测试页面 onMounted 生命周期函数中,定时修改索引 currentIndexRef 的值,从而实现红绿灯的自动切换:

onMounted(() => {
  setInterval(() => {
    currentIndexRef.value += 1
    currentIndexRef.value = currentIndexRef.value % statusList.length
  }, 1000)
})

4.4 文字描述

可以在红绿灯下面添加是否可以通行的文字描述。

模板:

<traffic-lamp :status="currentStatus"></traffic-lamp>
<div class="display">
  <div :class="left">{{getText(left)}}</div>
  <div :class="center">{{getText(center)}}</div>
  <div :class="right">{{getText(right)}}</div>
</div>

TS 代码:

const left = computed(() => {
  const list = currentStatus.value.split(',')
  return list[0] === Status.O ? list[1] : list[0]
})
const center = computed(() => {
  return currentStatus.value.split(',')[1] || Status.O
})
const right = computed(() => {
  const list = currentStatus.value.split(',')
  return list[2] === Status.R ? Status.R : Status.G
})
const getText = (status: string) => {
  if (status === Status.G) {
    return '可以通行'
  }
  if (status === Status.R) {
    return '停车等待'
  }
  return ''
}

样式:

<style scoped lang="scss">
@import "~@/assets/scss/traffic-lamp-common.scss";
.display {
  width: 420px;
  display: flex;
  margin-top: 10px;
  div {
    flex: 1;
    text-align: center;
  }
}
</style>

运行如下:

以上就是Vue 实现新国标红绿灯效果实例详解的详细内容,更多关于Vue 新国标红绿灯的资料请关注我们其它相关文章!

(0)

相关推荐

  • 如何在vue项目中使用UEditor--plus

    目录 1:UEditor-plus富文本编辑器如何在vue项目中使用 2.使用方法 3.运行项目 1:UEditor-plus富文本编辑器如何在vue项目中使用 备注:UEditor是由百度web前端研发部开发的所见即所得的开源富文本编辑器,由于该项目不在维护:程序员自发对其进行了维护,详见 https://gitee.com/modstart-lib/ueditor-plus?_from=gitee_search: 2.使用方法 第一步:在git上拉取ueditor代码到本地 第二步:解压后找

  • Vue 项目性能优化方案分享

    目录 前言 一.代码层面的优化 1.1.v-if 和 v-show 区分使用场景 1.2.computed 和 watch  区分使用场景 1.3.v-for遍历必须为item添加key,且避免同时使用v-if 1.4.长列表性能优化 1.5.事件的销毁 1.6.图片资源懒加载 1.7.路由懒加载 1.8.第三方插件的按需引入 1.9.优化无限列表性能 1.10.服务端渲染 SSR or 预渲染 二.Webpack 层面的优化 2.1.Webpack 对图片进行压缩 2.2.减少 ES6 转为

  • vue项目依赖升级报错处理方式

    目录 vue项目依赖升级报错处理 当启动vue项目安装依赖时报错 vue项目依赖升级报错处理 1.Vue Router 升级到3.5.1报错:Navigation cancelled from "/login" to "/" with a new navigation 原因:Vue Router内部报错没有进行catch处理导致的编程式导航跳转问题,往同一地址跳转时会报错,push和replace 都会导致这个情况的发生 import Vue from 'vue'

  • vue项目中安装less依赖的过程

    目录 vue安装less依赖 一.安装less依赖 二.修改webpack.base.conf.js文件 vue中less知识点总结 安装 变量(Variables) 混合(Mixins) 嵌套(Nesting) 运算(Operations) 转义(Escaping) 函数(Functions) 命名空间和访问符 映射 作用域(Scope) scss和stylus vue安装less依赖 一.安装less依赖 npm install less less-loader --save 二.修改web

  • vue中实现监听数组内部元素

    目录 vue监听数组内部元素 我们有两种办法解决此问题 vue如何监听数组的变化 vue监听数组内部元素 在VUE中,对数组的监听是浅监听,也就是它只能监听到数组的长度或者有无的变化,当我们修改数组中的某一个值时,也就是数组的长度状态并没有改变时,在正常情况下它是无法监听到的,在watch中我们知道可以使用deep属性进行深监听,那么在其他情况下呢? 我们有两种办法解决此问题 1.通过原生的js对数组先进行切割,然后在添加新的内容(也就是我们要修改的内容) array.splice(i, 1,

  • Vue图片裁剪功能实现代码

    目录 一.效果展示: 1.表单的图片上传项: 2.裁剪框页面 二.代码部分 1.首先安装Vue-Cropper,基于此组件的基础上开发的裁剪页面 2.裁剪弹窗的组件编写: 3.[图片上传表单项]组件编写 一.效果展示: 1.表单的图片上传项: - 新增时默认一个空白Input框 - 更新时展示以往上传存放的图片, - 点击[查看]浏览完整大小 - 点击[删除]清空src地址,重新上传新照片 2.裁剪框页面 - 先选择裁剪的图片 - 右侧展示裁剪区域 - 支持放大缩小,图片旋转 - 点击[上传图片

  • Vue 实现新国标红绿灯效果实例详解

    目录 引言 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组件实践红绿模

  • Vue中实现过渡动画效果实例详解

    目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画的使用 过渡的模式mode 列表过渡 列表过渡的介绍 列表过渡的使用 总结 Vue的transition动画 Transition动画的使用 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在React中使用过渡动

  • vue.js2.0 实现better-scroll的滚动效果实例详解

    什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里 .better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等. <template> <div> <div class="goods"> <div class="menu-wrapper" ref="menuWr

  • Vue实现星级评价效果实例详解

    我们把星级评价单独做成一个Star组件,抽离出来,其中父组件中引入(传入的是评分的值) <div class="score"> <Star :score="poiInfo.wm_poi_score"></Star> </div> 初始Star.vue <template> <div> <div class="star"> <span class="

  • Vue.js进行查询操作的实例详解

    Vue.js进行查询操作的实例详解 实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="../lib/vue.min.js" type="text/javascript" ></script> <title>字符转换</title> </head>

  • Java8 新特性Lambda表达式实例详解

    Java8 新特性Lambda表达式实例详解 在介绍Lambda表达式之前,我们先来看只有单个方法的Interface(通常我们称之为回调接口): public interface OnClickListener { void onClick(View v); } 我们是这样使用它的: button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { v.setText("

  • Bootstrap与KnockoutJs相结合实现分页效果实例详解

    KnockoutJS是一个JavaScript实现的MVVM框架.非常棒.比如列表数据项增减后,不需要重新刷新整个控件片段或自己写JS增删节点,只要预先定义模板和符合其语法定义的属性即可.简单的说,我们只需要关注数据的存取. 一.引言 由于最近公司的系统需要改版,改版的新系统我打算使用KnockoutJs来制作Web前端.在做的过程中,遇到一个问题--如何使用KnockoutJs来完成分页的功能.在前一篇文章中并没有介绍使用KnockoutJs来实现分页,所以在这篇文章中,将补充用Knockou

  • vue组件编写之todolist组件实例详解

    我们在topNav这个页面上插入一个todolist子组件 我不知道怎么回事,这里的markdown的代码总是串行..所以代码看得不舒服,见谅啊,我最后会放github的源代码地址. 1. 父组件topNav中注册子组件,引入子组件 <template> <div> <p>下面这一行就是定义的组件名称</p> <todo-list></todo-list> <router-view></router-view>

  • Java8新特性Stream流实例详解

    什么是Stream流? Stream流是数据渠道,用于操作数据源(集合.数组等)所生成的元素序列. Stream的优点:声明性,可复合,可并行.这三个特性使得stream操作更简洁,更灵活,更高效. Stream的操作有两个特点:可以多个操作链接起来运行,内部迭代. Stream可分为并行流与串行流,Stream API 可以声明性地通过 parallel() 与sequential() 在并行流与顺序流之间进行切换.串行流就不必再细说了,并行流主要是为了为了适应目前多核机器的时代,提高系统CP

  • vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解 前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的.那么问题来了,我们要怎样动态生成v-model? 现在项目做完了就整理了一下,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <

随机推荐