需求是点击登录了以后让值传递过去,判断是手机号登录或者邮箱登录来进行绑定邮箱或者绑定手机
但是在传递输入框的值的时候遇到,第一次传0次值,第二次传1次,第三次传2次.....的情况
问了下前辈,前辈帮我看完以后说原因:页面消失的时候监听不消失,需要进行手动取消
放上代码:
<template> <div> <el-form class="login-form" :rules="loginmsg" ref="login" :model="login"> <el-form-item prop="username"> <span class="registImg"> <img src="@/assets/img/login/yonghuming.png" /> </span> <el-input ref="username" v-model="login.username" placeholder="请输入邮箱号/手机号" type="text" tabindex="1" name="username" autofocus /> </el-form-item> <el-form-item prop="password"> <span class="registImg"> <img src="@/assets/img/login/mima.png" /> </span> <el-input ref="password" :key="passwordType" v-model="login.password" :type="passwordType" placeholder="请输入密码" tabindex="2" maxlength="16" show-password autofocus /> </el-form-item> <div class="login_div_btn"> <span class="login_span" @click="gopassword">忘记密码?</span> <el-button :loading="loading" type="primary" @click.native.prevent="handleLogin('login')" >登录</el-button> </div> </el-form> </div> </template> <script> import config from '@/config' // import bus from '@/config/bus.js' import {validEmail,validPhone} from './validate' export default { data() { var checkUserName = (rule, value, callback) => { if (!value || !value.trim()) { this.login.username = "" callback(new Error('手机号/邮箱不能为空')); } if(!validEmail(value) && !validPhone(value)){ callback(new Error("请输入正确的格式")); }else{ callback() } }; var validatePassword = (rule, value, callback) => { if (value.length < 6) { callback(new Error('密码不能少于6位')) } else { callback() } }; return { passwordType: "password", loading: false, login: { username: "18336638783", password: "123456" }, loginmsg: { username: [{required: true,validator: checkUserName, trigger: "blur"}], password: [{required: true,validator: validatePassword, trigger: "blur" }] } }; }, destroyed(){ this.$bus.$emit("usermsg",this.login.username) }, methods: { gopassword() { setTimeout(() => { this.loading = false; this.$router.push("/forgetpassword"); }, 500); }, handleLogin(formName) { this.$refs[formName].validate((valid) => { this.loading = true; if (valid) { this.$axios.post(config.KEY.URL_LOGIN+"/login",{ phoneOrEmail:this.login.username, passWord:this.login.password }).then(res =>{ console.log(res) if(res.data.status == 200){ this.$message.success("登录成功"); bus.$emit("usermsg",this.login.username) setTimeout(() =>{ this.loading = false; this.$router.push("/bindingmodifica/phone"); },1000) } if(res.data.status == 500 || res.data.status == 404){ setTimeout(() =>{ this.loading = false; this.login.password=""; this.$message.error(res.data.msg); },500) } if(res.data.status == "000"){ setTimeout(() =>{ this.loading = false; this.$message.error("请输入有效的用户信息"); this.login.password = this.login.username = ""; },500) } }).catch(err =>{ console.log(err) this.loading = false; this.$message({ message: "服务器错误" }); this.login.password = this.login.username = ""; }) } else { this.loading = false; return false; } }); } }, }; </script> <style> </style>
<template> <div class="binding_modifica"> <uploadheader></uploadheader> <div class="binding_main" id="bindingmodifica"> <router-view /> </div> </div> </template> <script> // import bus from '@/config/bus.js' import { validEmail, validPhone } from "@/components/login/validate"; import uploadheader from "@/components/upload/upload_header" import '@/assets/css/binding/binding_modifica.css' export default { data(){ return{ bindingVal:"", } }, components:{ uploadheader, }, methods:{ }, created(){ this.$bus.$on("usermsg",value =>{ console.log(value) this.bindingVal = value; // if(validEmail(this.bindingVal)){ // console.log("邮箱格式") // }else if(validPhone(this.bindingVal)){ // console.log("手机号格式") // } }) }, mounted(){ // bus.$emit('aa',false) }, destroyed(){ this.$bus.$off('usermsg'); } } </script> <style> </style>
需要在销毁的时候在destroyed生命周期中用$off方法来销毁这个方法
这样就可以做到一次传一个值了