vue项目中回车键登录登录密码是否可见以及登录功能做防抖处理

Posted 2021-06-09 是小橙鸭丶

在我们的登录页面，一般有个登录按钮，我们点击它然后才进行登录，但是站在用户体验上讲，体验非常不好，一般用户都是输入完账号和密码回车就直接登录了，以及一般希望在密码旁边可以点击查看自己的密码看见，输入的是否正确，接下来让我们先上效果图

密码不可见的时候

密码可见的时候

分为三个部分呀

一：回车键登录

1.第一种方法在created()写上以下代码

<script>
 		created() {
		回车键 enter点击登录
			  var _this = this;
		      document.onkeydown = function(e){
		        if(window.event == undefined){
		          var key = e.keyCode;
		        }else{
		          var key = window.event.keyCode;
		        }
		      //enter的ASCII码是13
		        if(key == 13){
					//判断用户名密码是否为空
					if(_this.loginForm.password == "" || _this.loginForm.account == ""){
						console.log('空')
						return false;	
					}else{
						
						_this.login();
						
						
					}
		          
		        }
		      }
	},
</script>

2.第二种方法
先在vue实例挂载完成的时候，挂载完成后监听按键，然后进行判断即可（若是已经做了表单验证的 可不判断）

mounted() {
		//绑定事件
		window.addEventListener("keydown", this.keyDown);
	},
	methods:{
		//回车登录
		keyDown(e) {
				
		  //判断按下是否是回车键
		  if (e.keyCode == 13) {
			  if(this.loginForm.password == "" || this.loginForm.account == ""){
				  console.log('账号密码为空')
				  return false
			  }else{
				 this.login() 
			  }
			  
		  }
		},
	}

二、密码是否可见

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

1.首先看输入框的代码

 <el-form-item prop="password" class="passwordclass">
   <el-input v-model="loginForm.password" 
	prefix-icon="el-icon-s-order" 
	:type="passwordType" 
	ref="password">
	</el-input>
	<span class="show-pwd" @click="showPwd">
	  <!--眼睛的图标-->
	  <i
		:class="passwordType == 'el-icon-view' ? '' : 'el-icon-view'"
	  ></i>
	</span>
	
</el-form-item>


在data定义数据
passwordType:'password', //默认为密码输入框

2.小眼睛的点击事件-实现切换密码是否可见

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

补充事项：
this.$nextTick()：在下次 DOM 更新循环结束之后执行延迟回调。
在修改数据之后立即使用这个方法，获取更新后的 DOM。
简单来说就是：当数据更新了，在dom中渲染后，自动执行该函数

三、登录操作进行防抖处理

1.函数防抖：是指在事件被触发n秒后再执行回调，如果在这n秒内事件再次被触发，则重新计时，这可以使用在用户的一些点击请求事件上、以及登录处理上、避免因为用户多次点击向后端发送多次请求

封装公用的方法
第一步：在utils文件夹下建立public.js文件

/**
 * 函数防抖 (只执行最后一次点击)
 * @param fn
 * @param delay
 * @returns {Function}
 * @constructor
 */
 export const Debounce = (fn, t) => {
    let delay = t || 500
    let timer = null
    return function () {
      let args = arguments
      if(timer){
        clearTimeout(timer)
		timer = null
      }
      timer = setTimeout(() => { //因为是箭头函数 所以this指向里面可以直接用
        fn.apply(this, args)
      }, delay)
    }
  };

/**
 * 函数节流
 * @param fn
 * @param interval
 * @returns {Function}
 * @constructor
 */
export const Throttle = (fn, t) => {
  let last
  let timer
  let interval = t || 500
  return function () {
    let args = arguments
    let now = +new Date()
    if (last && now - last < interval) {
      clearTimeout(timer)
      timer = setTimeout(() => {
        last = now
        fn.apply(this, args)
      }, interval)
    } else {
      last = now
      fn.apply(this, args)
    }
  }
}

第二步:在login.vue组件引入

import { Debounce, Throttle } from '../../utils/public.js' //自己要注意自己的路径

第三步：在login.vue组件使用

// 点击登录按钮，进行表单的验证 防抖操作
login:Debounce(function(){
	this.$refs.loginFormRef.validate(async valid => {
		if(!valid){
			return;
			
		}
		const {data: res} = await this.$http.post("/auth/login", this.loginForm).catch((error) => {
			if (error.response) {			  
			  if(error.response.status == 400){
				  return this.$message.error('登录失败,请检查你的密码或者验证码是否填错')
			  }
			}
		});
		console.log(res)
		
		if(res.code !== 200){
			return this.$message.error('登录失败')
		}else{
			window.sessionStorage.setItem('token',res.result.session)
			this.$router.push('/bigdata');
			return this.$message.success('登录成功')
		}
		console.log(res);
		
	})
}),

这样我们就实现了登录防抖效果啦~~
若有小伙伴想对防抖深入了解的也可以进入我另外一篇文章防抖节流看看呀