export default { //判断是否点击了 isChick(data,key='disabled',count=0){ data[key] =true if(count<=0){ data[key] =false } }, //此处是重点 使用的vue官网给的api方法 [vue-set](https://cn.vuejs.org/v2/api/#Vue-set) sendCode(self,name,k,v){ self.$set(name,k,v) } }
父组件中的逻辑部分
<script> export default { data() { return { // 显示子组件修改密码的对象变量 dialog: { visible: false, //是否显示 ruleForms: 'ruleForms', //点击按钮后，需要操作的refs(也就是dom元素) ruleForm: { //所需要进行在表单中操作的部分 phone: '', newPwd: '', code: '', sendCode: '发送验证码', disabled: false, isChick:false, loading: false, loadingText: '确 定' }, }, //倒计时60秒 timeCount:60 } }, methods:{ //重点部分 sendCode60s(self,opt){ let count=self.timeCount; const ruleForm = self[opt.dialog][opt.ruleForm] self.timer = setInterval(()=>{ //这个按钮是 self.$globals.isChick(ruleForm,'disabled',count) let code = count<10?`0${count}s后重新发送`: `${count}s后重新发送` self.$globals.sendCode(self,ruleForm,opt.sendCode,code) self.$globals.isChick(ruleForm,'isChick',count) if(count<=0){ ruleForm.disabled = false self.$globals.isChick(ruleForm,'disabled') code = '发送验证码' clearInterval(self.timer) count =self.timeCount self.$globals.sendCode(self,ruleForm,opt.sendCode,code) self.$globals.isChick(ruleForm,'isChick') } count -- },1000) }, //发送验证码sendCode sendCode(opt){ const phone = opt.phone //判断手机号码第1位是否是数字1开头 if(phone.slice(0,1)!=='1'){ this.$message({ showClose: true, message: '请输入正确的手机号码', type: 'error' }); return } this.$confirm(`向${phone}发送短信验证码?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.$message({ type: 'success', message: '发送短信验证码成功!' }); const opt ={ dialog: 'dialog', ruleForm: 'ruleForm', sendCode:'sendCode' } this.sendCode60s(this,opt) }).catch(() => { this.$message({ type: 'info', message: '发送短信验证码失败' }); }); }, //新的密码 determine(formName){ console.log(formName) // this.$refs[formName].validate((valid) => { // if (valid) { // this.dialog.ruleForm.loading = true // this.dialog.ruleForm.loadingText ='发送中...' // } else { // return false; // } // }); }, } } </script>
总结
以上所述是小编给大家介绍的vue2之简易的pc端短信验证码的问题及处理方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: