150行Vue代码写出新国标红绿灯效果，详解每一步操作

2024-01-10 01:03:08

实现新国标红绿灯的交互式指南：使用 Vue 3 框架

简介

随着城市化进程的加速，交通越来越繁忙，交通信号灯在保障道路安全和顺畅通行方面发挥着至关重要的作用。作为交通管理领域的最新标准，新国标红绿灯以其增强的安全性、可视性和智能化而备受关注。本文将带你踏上一段技术探索之旅，使用流行的前端框架 Vue 3，从头开始构建新国标红绿灯交互式效果。

项目准备

安装 Vue 3

打开终端或命令提示符，输入以下命令：npm install vue@next

创建 Vue 项目

使用命令：vue create 红绿灯项目创建一个新的 Vue 项目

组件开发

创建 Vue 组件

在项目中创建一个名为 红绿灯.vue 的新文件

编写组件代码

<template>
  <div class="traffic-light">
    <div class="red-light" :class="{ active: isRedActive }"></div>
    <div class="yellow-light" :class="{ active: isYellowActive }"></div>
    <div class="green-light" :class="{ active: isGreenActive }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRedActive: true,
      isYellowActive: false,
      isGreenActive: false,
      interval: null,
    };
  },
  methods: {
    start() {
      this.interval = setInterval(() => {
        this.isRedActive = !this.isRedActive;
        this.isYellowActive = !this.isYellowActive;
        this.isGreenActive = !this.isGreenActive;
      }, 1000);
    },
    stop() {
      clearInterval(this.interval);
    },
  },
  mounted() {
    this.start();
  },
  destroyed() {
    this.stop();
  },
};
</script>

<style>
.traffic-light {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 200px;
  background-color: black;
}

.red-light,
.yellow-light,
.green-light {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.red-light {
  background-color: red;
}

.yellow-light {
  background-color: yellow;
}

.green-light {
  background-color: green;
}

.active {
  opacity: 1;
}
</style>

组件使用

导入组件

在 main.js 文件中导入组件并将其注册为全局组件：

import RedGreenLight from './components/RedGreenLight.vue';

Vue.component('red-green-light', RedGreenLight);

在 App.vue 中使用组件

在 App.vue 文件中使用组件：

<template>
  <div id="app">
    <red-green-light></red-green-light>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>