Vue中怎么添加手机验证码组件功能

这篇文章主要介绍了Vue中怎么添加手机验证码组件功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue中怎么添加手机验证码组件功能文章都会有所收获，下面我们一起来看看吧。

成都创新互联公司是一家集网站建设,石峰企业网站建设,石峰品牌网站建设,网站定制,石峰网站建设报价,网络营销,网络优化,石峰网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

什么是组件：

组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。

写在前面：

今天要实现的功能是在完善个人信息页面（vue）中添加手机验证码组件，当用户点击手机选项时，弹出获取验证码组件，完成验证手机的功能：

Vue中怎么添加手机验证码组件功能

这里考虑到功能的复用，我把当前弹出手机验证码的操作放在了单独的组件中：


 
  
   绑定手机

Vue.component('timerBtn',{ template: ' 0">{{ text }}', 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 后重获取' : '获取验证码'; } } });

大橙子网站建设，新征程启航

Vue中怎么添加手机验证码组件功能

其他资讯