大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍Vue中如何添加手机验证码组件功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联主营芮城网站建设的网络公司,主营网站建设方案,重庆APP软件开发,芮城h5成都小程序开发搭建,芮城网站营销推广欢迎芮城等地区企业咨询
什么是组件:
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。
写在前面:
今天要实现的功能是在 完善个人信息页面(vue)中添加手机验证码组件,当用户点击 手机选项时,弹出获取验证码组件,完成验证手机的功能:
这里考虑到功能的复用,我把当前弹出手机验证码的操作放在了单独的组件中:
绑定手机
并把当前组件放在需要使用它的组件中,这里需要注意的是,在控制 绑定手机组件的显示和隐藏的时候,出现了一个小问题:点击 “手机” 按钮需要显示当前组件,但什么时候去隐藏当前的组件呢,我是这样想的:
情况1:用户已经输完了手机号并通过了验证,点击"确定"按钮的时候需要隐藏当前组件;
情况2:用户没有完成手机验证,但又不想继续,点击当前手机的任意位置(除去“确定”按钮、手机号输入框和 验证码输入框)都应该隐藏当前组件;
基于这两种情况,我在父组件中给子组件添加了一个容器:
通过控制 父div 的显示状态来控制子组件的显示状态,
methods:{ // 手机号验证 verifyPhone(){ this.verifyShow=!this.verifyShow; }, },
在验证组件中的逻辑控制如下:
其中,获取验证码和验证短信验证码的逻辑还没有写入。
PS:下面给大家补充一段vue短信验证码组件实例代码:
Vue.component('timerBtn',{ template: '', props: { second: { type: Number, default: 60 }, disabled: { type: Boolean, default: false } }, data:function () { return { time: 0 } }, methods: { run: function () { this.$emit('run'); }, start: function(){ this.time = this.second; this.timer(); }, stop: function(){ this.time = 0; this.disabled = false; }, setDisabled: function(val){ this.disabled = val; }, timer: function () { if (this.time > 0) { this.time--; setTimeout(this.timer, 1000); }else{ this.disabled = false; } } }, computed: { text: function () { return this.time > 0 ? this.time + 's 后重获取' : '获取验证码'; } } });
var vm = new Vue({ el:'#app', methods:{ sendCode:function(){ vm.$refs.timerbtn.setDisabled(true); //设置按钮不可用 hz.ajaxRequest("sys/sendCode?_"+$.now(),function(data){ if(data.status){ vm.$refs.timerbtn.start(); //启动倒计时 }else{ vm.$refs.timerbtn.stop(); //停止倒计时 } }); }, } });
以上是“Vue中如何添加手机验证码组件功能”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!