提示语部分不要在意（非重点部分)

简单说下布局（采用的是某视频剪辑软件的元素用户界面的用户界面框架)进行布局操作的

子组件模板部分如下（代码部分是很基础的)

模板' div class='忘记el-dialog title='修改新密码：可见。“同步=”对话框。可见' :点击关闭-模式=' false ' :按下关闭-转义=' false ' El-form : model='对话框。规则表单'状态-图标： rules=' rules ' : ref='对话框。规则表单'标签-宽度=' 100px '类='演示-规则表单' El-表单-项目标签='手机号码道具='电话'必需El-输入类型=' text ' v-model。数字='对话框。规则形式。phone ' autocomplete=' off ' : clearable=' true '/El-input/El-form-item El-form-item标签='手机验证码prop=' code '必需div class=' send-code ' El-input type=' text ' v-mode='对话框。规则形式。code ' autocomplete=' off ' maxlength=' 6 ' show-word-limit : clearable=' true '/El-input El-link 3360 style=' { color : dialog。规则形式。电话。tostring().长度===11?#222':'#999'} '类型=' info ' :下划线=' false ' : disabled=' getDisabled ' @ click=' send code({ phone : dialog。规则形式。电话，发送代码：对话框。规则形式。发送代码})' { {对话框。规则形式。发送代码} }/El-link/div/El-form-item El-form-item标签='新密码prop='newPwd '必需El-input : clearable=' true ' type=' password ' v-model=' dialog。规则形式。新建pwd '/El-输入/El-表单-项目/El-表单div槽='页脚' class='对话框-页脚' El-button @ click='取消'取消/el按钮el按钮类型=' primary ' @ click=' decision(对话框。规则表单)' :加载='对话框。规则形式。正在加载“”对话框。规则形式。正在加载文本} }/El-按钮/div/El-对话框/div/模板子组件逻辑部分如下（代码部分是很基础的)

在@/utils/validate.js中的使用正则代码

//验证手机号码导出const validat phone=/^(^(([0] d { 2，3}-)？(0d{2，3 })-( d { 7，8})(-(d{3，})？$)|(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$///验证密码导出常量有效密码=/^(?=.*d)(？=.*[a-zA-Z]).{5,20 } $/脚本从@/utils/验证密码'导入{验证电话，验证密码}导出默认值{ prop : { dialog : { type : object，default : } }，}，name: '忘带，data(){ //使用正则进行验证手机号码const validatePhone=(规则、值、回调)={ if(！值){返回回调（新的错误('请输入手机号码'));} else { if(！validatPhone.test(值)){回调（新错误('请输入手机号码'));返回}回调();} };//使用进行验证手机验证码const validateCode=(规则、值、回调)={ if(值==='') {返回回调（新的错误('请输入验证码'));} else { //真正环境请修改成自己的逻辑即可if (this.dialog.ruleForm.code！=='123456') {回调（新错误('验证码失误，请重新输入))//这个。对话。规则形式。代码return }回调();} };//使用正则进行验证密码const validatenewPwd=(规则、值、回调)={ if(值==='') {回调（新错误('请输入密码'));return } else if(！validatePassword.test(值)){返回回调（新的错误('新密码不合法'));} else { callback()；} };返回{规则： {//验证表单元素中的规则phone :[{ validator : validate phone，trigger: ['blur '，' change'] } ]，代码：[{ validator : validate code，trigger: ['blur '，' change'] }]]，new pwd :[{ validator : validate new pwd，trigger 3:[' blur '，' change ']}，}，timer 3: null//操作定时器} }，computed:{ //getDisabled()当手机号码的长度等于11位和点击验证码状态为错误的时，则可以进行倒计时操作getDisabled(){ 0让电话=这个。对话。规则形式。phone const是click=this。对话。规则形式。是点击if(电话。tostring().length===11 isChick===false){ return false } else {//this。对话。规则形式。disabled=true返回true } }，methods:{ //发送验证码发送代码(可选){ this .$emit('sendCode '，opt) }，//点击取消按钮时触发取消(){此$emit('cancel') }，//点击确定按钮时触发确定{这个.$refs[resf].验证((有效)={ if(有效){这个.$emit('判定，resf) } else { console.log('错误提交！');返回false } })；},} }/脚本子组件逻辑部分如下（代码部分是很基础的)

样式范围为lang="SCS ".忘记{ /deep/.El-dialog _ _包装器{ .El-dialog {最大宽度： 500 px。El-dialog _ _ header { text-align : center；} } .演示-规则表单{。El-form-item _ _ content {最大宽度：100% } } .el-dialog__body{ .El-form-item { text-align : center；} } } .发送代码{ display : flex flex : 1；对齐-内容：空间均匀；/deep/.El-input {右边距： 12px }/deep/.El-link { white-space : nowrap；显示器：内联块；线高： 1;光标：指针；背景# fffborder: 1px实心# dcdfe6color: # 606266-web套件-apparence :无；文本对齐：中心；盒子尺寸：边框盒子；大纲：无；保证金： 0；transit : 1 font-weight : 500；蚊子用户-选择：无；-网络工具包-用户-选择：无；-ms-用户-选择：无；padd : 12px 10px font-size : 14px；边界半径： 4px} } .对话框页脚{ display : flex flex : 1；正义-内容：中心；/deep/.El-button { flex : 0 40%；} } }/样式父组件中的模板部分

模板忘记： dialog=' dialog ' @ cancel=' dialog。可见=假“@”判定='判定@发送代码='发送代码'/忘记/模板为什么需要使用设置这个美国石油学会(美国石油协会)方法呢

如下截图

可以学习下这个链接的使用设置的例子

全局变量globals.js文件

[vue-set]的文档(cn.vuejs.org/v2/api/#Vue…)

说明(*****向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。)

导出默认值{ //判断是否点击了isChick(data，key='disabled '，count=0){ data[key]=true if(count=0){ data[key]=false } }，//此处是重点使用的某视频剪辑软件官网给的美国石油学会(美国石油协会)方法[Vue-set](https://cn。vuejs。org/v2/API/# Vue-set)SendCode(self，name，k，v){ self .$set(名称，k，v) }}父组件中的逻辑部分

脚本导出默认{ data() { return { //显示子组件修改密码的对象变量dialog: { visible: false，//是否显示规则表单： '规则表单',//点击按钮后，需要操作的参考文献（也就是数字正射影像图元素)ruleForm: { //所需要进行在表单中操作的部分phone: ' '，newPwd: ' '，code: ' '，sendCode: '发送验证码，disabled: false，isChick:false，loading: false，loadingText: '确定' }, }, //倒计时60秒时间项：60 } },方法：{ //重点部分sendCode60s(self，opt){ let count=self。时间计数；常量规则形式=self[opt。对话框][选择。规则形式]自我。timer=setInterval(()={//这个按钮是自我$globals.isChick(规则表单，“已禁用”，计数)让代码=count10？` 0${count}s后重新发送： `${count}s后重新发送自我$globals.sendCode(self，ruleForm，opt.sendCode，code) self .$globals.isChick(ruleForm，' isChick '，count)if(count=0){ rule form。禁用=虚假自我.$globals.isChick(规则表单，“已禁用”)代码='发送验证码clearInterval(自拍)计数=自拍时间计数$globals.sendCode(self，ruleForm，opt.sendCode，code) self .$globals.isChick(ruleForm，' isChick') } count - }，1000) }，//发送验证码发送代码发送代码(opt){ const phone=opt。电话/判断手机号码第一位是否是数字一开头if(phone.slice(0，1)！=='1'){这个$ message({ showcloses : true，message: '请输入正确的手机号码，键入： ' error ' })；退回}这个$ confirm(` 0向${phone}发送短信验证码？`, '提示，{ confirmButtonText: '确定，取消按钮文本： '取消，键入： '警告' }).然后(()={这个.$message({ type: 'success '，message: '发送短信验证码成功!'});const opt={ dialog: 'dialog '，ruleForm: 'ruleForm '，sendCode : ' sendCode ' }此。发送代码60s(此，可选)} .接住(()={这个.$message({ type: 'info '，message: '发送短信验证码失败' });});}, //新的密码确定(formName){控制台。日志(表单名)//这个$refs[formName].验证((有效)={ //if(有效){//这个。对话。规则形式。loading=true//this。对话。规则形式。正在加载文本='发送中.'//} else { //返回false//}//})；},} }/脚本总结

以上所述是小编给大家介绍的vue2之简易的个人计算机端短信验证码的问题及处理方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！