Vue 短信验证码组件开发详解
网络编程 2021-07-04 19:20www.168986.cn编程入门
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。这篇文章主要介绍了Vue 短信验证码组件开发详解,需要的朋友可以参考下
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。
摘要:
1、该组件基于Vue 2.1.X版本;
1、 Vue 组件代码如下:
Vue.ponent('timerBtn',{ template: '<button v-on:click="run" :disabled="disabled || time > 0">{{ text }}</button>', 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(); }, s: 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; } } }, puted: { text: function () { return this.time > 0 ? this.time + 's 后重获取' : '获取验证码'; } } });
2、使用方式:
<timer-btn ref="timerbtn" class="btn btn-default" v-on:run="sendCode" :disabled="disabled" :second="60"></timer-btn>
disabled 建议不要绑定,我们可以通过调用组件的setDisabled方法来切换按钮可用状态;
second 初始值60s 没特别值可以不绑定;
所以我们可以在HTML页面这样:
<timer-btn ref="timerbtn" class="btn btn-default" v-on:run="sendCode" ></timer-btn>
JS这样:
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.s(); //停止倒计时 } }); }, } });
以上所述是长沙网络推广给大家介绍的Vue 短信验证码组件开发详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
上一篇:Javascript下拉刷新的简单实现
下一篇:JS去除字符串中空格的方法
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程