网站维护案例分析,wordpress的文件权限设置,做网站地图的步骤,论坛网站建设价格让element-ui的输入框聚焦的4种方式
思路#xff1a;#xff08;可以跳过这一步看完整代码——完整代码#xff09; 1. 进入页面时#xff0c;用户名输入框就要获取焦点#xff0c;使用 自定义指令 聚焦更方便。当然也可以用 ref 在 mounted() 钩子函数中让输入框聚焦。 …让element-ui的输入框聚焦的4种方式
思路可以跳过这一步看完整代码——完整代码 1. 进入页面时用户名输入框就要获取焦点使用 自定义指令 聚焦更方便。当然也可以用 ref 在 mounted() 钩子函数中让输入框聚焦。 mounted(){this.$nextTick((){ this.$refs.userName.focus();});
}2. 在用户输入框输入信息后需要按 Enter 键使下一个输入框聚焦此时要用到按键事件。同时还要考虑按下 enter 键后输入框内是否有值。如果没有值那么就让用户输入框失去焦点这一步的作用是让 element封装好的表单验证信息显示出来然后再让用户输入框重新聚焦。 confirmInput(e){if(e.target.value !){e.target.blur();} else {e.target.blur();e.target.focus();}},3. 用户在密码框输入密码后要进行登录操作。同样要判断这个输入框是否有值。 完整代码
el-form :modelruleForm :rulesrules refruleForm classloginFormel-form-item propuserNameel-input typetext sizemedium refuserNamev-focus v-modelruleForm.userName keyup.enter.nativeconfirmInput($event,false)template slotprepend用户名/template/el-input/el-form-itemel-form-item proppasswordel-input typepassword v-modelruleForm.passwordsizemedium refpasswordkeyup.enter.nativeconfirmInput($event,true)template slotprepend密码/template/el-input/el-form-itemel-form-item classcheckboxItemel-checkbox label记住密码/el-checkbox/el-form-itemdiv classsubmitBtnp clickloginEnter登 录/p/div
/el-formscript
data(){return {rules: {userName: [ { required: true, message: 请输入用户名, trigger: blur } ],password: [ { required: true, message: 请输入密码, trigger: blur } ]},ruleForm: {userName: ,password: }}
},
directives:{focus: {inserted: function(el){el.children[1].focus();}}},
methods: {//按Enter键//如果有多个输入框可以在这一步多传入一个参数//假设第三个参数是refName在模板中传的是该输入框后一个要聚焦的输入框的ref值并将这个值传给inputFocus()作为第二个参数。//在inputFocus中将this.$refs.password.focus();中的.password用[refName]来代替。confirmInput(e, isLogin){// 判断输入框是否有值有的话失焦让另外一个输入框聚焦// 没有就先失焦让提示显示出来再重新聚焦这样可以让element表单封装的验证信息显示出来if(e.target.value !){e.target.blur();this.inputFocus(isLogin);} else {e.target.blur();e.target.focus();}},//通过isLogin这个参数来判断按下enter键后是否要调用登录接口inputFocus(isLogin){if(isLogin){this.loginEnter();} else {this.$refs.password.focus();}},// 登录loginEnter(){this.$refs.ruleForm.validate((valid) {if (valid) {this.$router.replace(/productWarehouse/history);} else {alert(error submit!!);return false;}});}
}
/script示范一下如果有多个输入框的情况
el-input v-modelloginForm.userName refuserName v-focuskeyup.enter.nativeconfirmInput($event,false, password)placeholder输入您的账号或手机号 classnobr autocompleteoff
/el-inputel-input show-password v-modelloginForm.password refpasswordkeyup.enter.nativeconfirmInput($event,netToken?true:false, codeInput)placeholder输入您的密码 classnobr autocompleteoff
/el-inputel-input v-modelloginForm.validCode refcodeInputkeyup.enter.nativeconfirmInput($event,true)placeholder输入验证码忽略大小写 classnobr
/el-inputscript//点击确认按钮confirmInput(e, isLogin, inputRef){if(e.target.value ! ){e.target.blur();this.inputFocus(isLogin, inputRef);} else {e.target.blur();e.target.focus();}},//isLogintrue表示登录inputFocus(isLogin, inputRef){if(isLogin){this.submitForm();} else {this.$refs[inputRef].focus();}},
/script
