vue项目回车键登录、登录密码是否可见

在前端登录的时候，往往会有个登录的按钮，点击一下就可以进行登录操作，有时候我们想按了回车键就可以登录，这样的话登录起来会更加的方便，密码要求比较严格的话可能会有特殊符号，我们想知道自己输入的正确与否又不想通过登录来验证的话，就可以做一个控制密码是否可见的按钮，就以vue项目的登录页面为例介绍一下回车键登录以及注意事项。

先看一下不同状态下的效果：

密码不可见：

密码可见

分两个部分：

一：回车键登录：

在基础的登录步骤完成之后添加回车键登录效果，没有建好基础登录效果的请先自行解决，这里不细说，其实回车键登录就两个步骤：首先在vue实例挂在完成的时候，监听按键，然后判断就可以了。

mounted() {
    //绑定事件
    window.addEventListener("keydown", this.keyDown);
  },
  methods: {
    keyDown(e) {
      //判断按下是否是回车键
      if (e.keyCode == 13) {
        //	判断用户名密码是否为空
        if (this.loginform.password == "" || this.loginform.userId == "") {//	如果二者其一为空则不执行任何操作
          return false;
        } else {//如果两个都不为空则执行登录操作
          //登录方法
        }
      }
    },
}

注意事项：
最好在表单规则里面加入用户名跟密码的验证，否则会给后端带来不小的压力。

二：密码是否可见

密码是否可见主要就是判断输入框的类型是普通文本还是密码。只需要改变类型就可以达到可见与不可见的效果。

首先看一下密码框的代码：

<el-form-item prop="password">
            <el-input
              v-model.trim="loginform.password"
              placeholder="请输入密码"
              :type="passwordType"
              ref="password"
              :validate-event="false"
            ></el-input>
            <span class="show-pwd" @click="showPwd">
              <!--眼睛图标-->
             <i :class="passwordType == 'password' ? 'el-icon-view' : 'el-icon-refresh'"></i>
            </span>
 </el-form-item>

然后就是点击小眼睛的时候的判断：

//密码是否显示
    showPwd() {//点击改变密码框类型
      if (this.passwordType === "password") {
        this.passwordType = "text"; 
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {//将回调函数延迟在下一次dom更新数据后调用
        this.$refs.password.focus();
      });
    },

注意事项：
①this.$nextTick()：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。简单来说就是：当数据更新了，在dom中渲染后，自动执行该函数，
②passwordType ：变量。上面代码里面的this.passwordType 就是密码框类型的值，由于是要改变的，不能写死，所以用定义passwordType变量代替

补充内容：

登录的时候还需做防抖处理，否则多次按下回车键回多次请求接口，造成资源的浪费，可以参考：vue中使用防抖和节流进行改进