使用vue给暴躁的你做一个屏幕检测器吧

·  阅读 3500
使用vue给暴躁的你做一个屏幕检测器吧

我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!

大家都知道,在写程序的时候,容易暴躁,暴躁起来就容易摔键盘,摔屏幕,这样容易造成屏幕损坏。于是乎,写了一个小工具来检测屏幕是否是好的。

各位前端大佬不要笑话,运维小弟献丑了。

项目体验

项目检测效果,比如,小弟我的电脑屏幕,在屏幕检测器检测后,效果是这样的,这样的话很容易判断屏幕是否坏了。

项目思路

我们检测屏幕是否有损坏,最有效的方法是将整个屏幕都置于一个颜色,例如: 红色、黑色、蓝色、绿色等。而后通过肉眼观察,即可辨别屏幕是否损坏。

初始化demo

我们打开码上掘金(code.juejin.cn/),创建代码片段,选择新建空白片段。

由于到引入vue.js,所以我们选择Script中的设置

在设置中,我们输入vue.js``cdn的地址即可,比如我们使用vue 2,我们就可以输入: cdn.jsdelivr.net/npm/vue@2.6…

我们可以编写如下代码,来校验一下我们设置的demo环境。

我们如上编写了一段非常简单的代码,编写完毕后,我们点击运行,即可出现hello pdudo,证明我们的环境是没问题的了。

核心代码

在上述项目思路过程,我们已经介绍过项目的核心思路,那就是给屏幕设置一个背景色就可以了,我们可以先不适用vue.js,用html+ css的形式,来编写该功能。

我们核心代码如上,我们定义一个新的div标签,其中给了一个id标签 为windowclass标签为green,其中window编写的是长和宽是1000vh以及 1000vw。(关于为什么使用vhvw而不是用px,我们总结的时候讲),而green编写的是背景为绿色。

使用vue控制输出

如上,我们整个静态框架已经搭建完毕了,我们想输出不同的颜色,我们可以定义一堆class,例如:

.green {
  background: green;
}

.red {
  background: red;
}

.white {
  background: white;
}

.blue {
  background: blue;
}

.black {
  background: black;
}
复制代码

如上我们定义了5种颜色,我们在静态代码中,只需要键入class="xxx",其中xxx是指我们已经规定好了的class,而这个,正是我们需要使用vue来控制的。

如何使用vue来修改class的标签的值呢? vue给我们提供了一个方法叫做: v-bind:class,我们可以修改下,不直接写class,而是写v-bind:class,也不是直接写green了,而是vue中变量。

我们尝试一下,我们将其变量修改为red运行试试。

我们目的不仅于此,我们想使用鼠标,来切换颜色,关于这点,其实我们可以做一个点击事件,来修改vue中的backcolor变量的值,来实现该需求。

基于此,我们先来做点击事件。

我们在该div上绑定一个点击事件,其值为changeBackground, 接着,我们再编写该方法,目前我们在方法中,将其backcolor修改为blue,最后我们尝试运行下,点击屏蔽,发现页面由绿色变为蓝色了。

我们如何有序循环切换呢?

我们可以每次点击,都修改其backcolor的值,来达到该效果,我们就编写该方法即可。

changeBackground() {
  switch (this.backcolor){
    case "red":
      this.backcolor = "green"
      break
    case "green":
      this.backcolor = "white"
      break
    case "white":
      this.backcolor = "blue"
      break
    case "blue":
      this.backcolor = "black"
      break
    case "black":
      this.backcolor = "red"
      break
  }
}
复制代码

如上,代码就可以实现一个循环,若收到点击消息,当检测到当前屏幕是红色的时候,就将其修改为绿色,当检测到当前屏幕是绿色的话,就将其修改为白色,最终的循环颜色为:

那我们的功能实现了,最后给代码命名一下,叫做“屏幕检测”。

总结

由于没有系统性的学习过前端相关知识,现在拿起来,稍微有点慢,作为一个做运维,或者写后端的人来讲,前端项目写起来,真的有一种成就感。关于项目中,div为什么要设置为vhvw,如果我们设置为100%,对于项目来说,是我们将父节点的长和宽占满,但是我们父节点又没有任何东西,所以,这样设置,不得行,最后考虑了一个最笨的办法,将单位百分比换成vhvw形式,怎么样,好玩吧,快来动动小手指,试试吧。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改