前言

时间如白驹过隙，转瞬即逝，转眼间离上次写博客也长达八个月之久了。在这与同学分开的八个月时间，我的生活也算时而成佛时而封魔了，（然而到这里我就默默的念叨一句“老司机们别想歪了呀，不是那啥前如魔，那啥后成佛，具体情况我也描述不出来，只能说生活终于还是对我下手了”！！）不过最终还算功德圆满，有幸成为了一位前端工程师。学了三年半java后端，以及实习了半年Android及全栈的我，最后居然去做前端了，也算是人生的一大转折了。基于目前基础太差，所以记录一些前端基础知识咯，方便自己的同时也想着能帮助他人，我也知道有bug的感觉是怎样的，反正不好受。虽然标题只是解决谷歌form表单的填充，but！！后面还有ES6 新特性Promise用法，以及基于vue-element手脚架的组件样式的修改。

取消谷歌浏览器form表单的填充

首先我来给大家科普一下下，谷歌for表单填充的出发条件，一般情况是由type=“text”后面接着出现type=“password”两个表单同时出现引起的，但是肯定有例外咯，嘻嘻，其实我也不知道例外的规律是什么，反正它就是要给你填，你又不能把它怎么样了，只能从 自己的代码下手咯，解决方案，两种方式：

1. 第一种，在你的表单上面添加两个表单类型为text，password，隐藏之，直接上代码。重点在于visibility: hidden

    <input type="text"  name="username" style="height:1px; visibility: hidden" autocomplete="off"/>
    <input type="password" name="password" style="height:1px; visibility: hidden" autocomplete="off"/>

2.第二种，设置input里面的auto-complete=“off”属性，还是上点代码咯，直观一点。这里有两点需要强调，第一点：auto-complete和autocomplete这两个，谁管用就用哪个，别问，我也不知道为啥，第二点：要是同时解决text类型下面接着password类型的表单，则需要在password类型的表单中使用auto-complete=“new-password”。

   <el-input
        ref="phonenumber"
        v-model="loginForm.phonenumber"
        placeholder="请输入手机号"
        name="phonenumber"
        type="text"
        tabindex="1"
        auto-complete="off"
      />
       <el-input
        :key="passwordType"
        ref="password"
        v-model="loginForm.password"
        :type="passwordType"
        placeholder="请输入密码"
        name="password"
        tabindex="2"
        auto-complete="new-password"
        @keyup
      />

3.若是上诉两种方法都不适用，那就试试这个吧。(讲真的，本来我两种方法都有效，使用一段时间后两种方法都无效了，让我都有种代码中邪了的感觉)

说说具体做法，在css的input中加入 &:-webkit-autofill{-webkit-text-fill-color:‘你输入框想要的颜色’}，木有办法，若是浏览器非得给你填充，那么便让填充的背景色成为自己想要的颜色吧。

  input {
      	 background: transparent;
         border: 0px;
         -webkit-appearance: none;
         border-radius: 0px;
         padding: 12px 5px 12px 15px;
         color: rgba(141,141,141,1);
         height: 47px;
         caret-color: rgba(141,141,141,1);
         &:-webkit-autofill {
           -webkit-text-fill-color: rgba(141,141,141,1) !important;
           transition: background-color 5000s ease-in-out 0s;
         }
       }

Promise的理解和用法

在下思考良久，发现自己并不能讲promise说个清楚明白，更甚至于恐误人子弟，那便附上一段链接吧，廖大神讲课还是很通俗易懂的，简单转述一下吧：“promise是一个用来执行 ‘将来会执行某件事’的对象”，比自己写回调函数牛逼多了。链接如下


廖大神之promise详细介绍与用法

基于vue-element前端开发时，修改element-ui组件的样式

这个问题的开发场景是这样，如果你的网站设计没有UI的话直接用element的原生样式就差不多，毕竟大公司的产品，审美还是很符合多数人的。然而，在下也不知该说幸运还是不幸，网站的原型和UI全部有人设计了，我就只需要干点讲图片转化为代码就行，当然像我这样思想随意浪荡的小青年是觉得不会甘心被如此约束，一边想着实习的时候啥都是让我自己设计那段日子（其实那个时候真的觉得很煎熬，因为设计不出来，，，），一边联系上了UI，毕竟新人嘛，我客客气气的问道：“UI老哥，您看这个页面我这样写行不行”？，三五分钟后，老哥也温柔回复我了，“你这个不行，视觉效果太软了，这些页面都是大佬们看过敲定的，不能随便修改”。我心里有个声音一直在说着“坚持自己的想法，与他干”，but，我还是秒回了“好的，我马上改”。于是就有了这个知识点的分享。

在你需要修改element-ui组件的页面，写入下图css格式，必须记得一点不能有

scoped

，这里有着我对element的按钮组件的修改，只是修改了五个样式而已，不知道你们觉得多不多，我觉得还行，只是不好找啊，下面重点来了，我是如何找到他们的呢，最笨的方法往往很有效果，f12去找，如果您问我f12怎么找的话，我想您应该还不会用到这个知识点，就当看个热闹吧，f12找的时候，一般一两次是找不完的，需要改变您想要改变组件的状态，例如button就是点击，鼠标进入，点击设为不可用，点击设为不可用后移出，点击执行失败后移出，等等，只要您细心就一定能找完，其实也不用找完，只要能满足您的需求就ok了。然而这里有个小问题，我也尚未解决，就是将这些样式提取到外部css文件时，有些样式会失效，也不知是不是因为我脸黑的原因，反正不知道，就只能每个文件复制粘贴css文件了。

<style lang="scss">
  .el-button--primary {
    background-color:rgba(0,162,154,1);
    border-color:rgba(0,162,154,1)
  }
    .el-button--primary:hover {
    background-color:rgba(0,162,154,1);
    border-color:rgba(0,162,154,1)
  }
  .el-button--primary.is-disabled {
    background-color:#c5c5c5;
    border-color:#c5c5c5
  }

   .el-button--primary.is-disabled:hover {
    background-color:#c5c5c5;
    border-color:#c5c5c5
  }
  .el-button--primary:focus, .el-button--primary:hover {
    background-color:rgba(0,162,154,1);
    border-color:rgba(0,162,154,1)
  }
</style>

不说再见

好吧，夕阳西下，没钱人在加班。。。。。。。。。。。。。。。。。。