Vue 短信验证码组件

1、 Vue 组件代码如下：

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

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.stop(); //停止倒计时}});},}
});

转载自：https://my.oschina.net/woter/blog/835753?hmsr=toutiao.io

Vue 短信验证码组件相关推荐

超简单！Vue 短信验证码组件开发详解
1. Vue 组件代码如下: Vue.component('timerBtn',{template: '<button v-on:click="run" :disabled= ...
vue短信验证码思路
1.给获取验证码的按钮绑定事件,点击后禁⽤按钮并且开始倒计时(前端⼯作) 2. 然后前端发起ajax请求,请求后台提供的获取验证码接⼝传递⼿机号过去 3. 后台接收到前端请求后,⽣成⼀个验证码,然后 ...
2.vue3医疗在线问诊项目 - _登录模块 ==＞代码片段、css变量主题定制、cp-nav-bar组件封装、svg打包精灵图插件、cp-icon组件封装、表单校验、密码登录、短信验证码登录及两者
2.医疗在线问诊项目 - _登录模块 ==> 代码片段.css变量主题定制.cp-nav-bar组件封装.svg打包精灵图插件.cp-icon组件封装.表单校验.密码登录.短信验证码登录及两者的 ...
vue中获取短信验证码IOS手机问题
vue使用中发现了一个问题,由于ios手机获取短信验证码后,验证码会直接显示在键盘上,点击键盘上的验证码即可给对应的input赋值,但是在项目开发中发现输入框的取值为空经过排查是因为通过v-mode ...
vue中获取短信验证码功能IOS手机问题
vue使用中发现了一个问题,由于ios手机获取短信验证码后,验证码会直接显示在键盘上,点击键盘上的验证码即可给对应的input赋值,但是在项目开发中发现输入框的取值为空经过排查是因为通过v-mode ...
5. SpringSecurity用户认证源码与实现短信验证码（自定义SpringSecurity组件）
前言源码讲解源码分析 AbstractAuthenticationProcessingFilter.java UsernamePasswordAuthenticationFilter.java P ...
vue element-ui实现获取短信验证码 ,60秒倒计时及页面
cc废话不多说先上效果图 vue页面布局 <el-form-item prop="phoneCode" class="pr"><el-inp ...
vue,一路走来（14）--短信验证码框的实现（类似支付密码框）
由于项目的扩展,新增了很多功能,今天谈一下短信验证码框的实现. 思路:每个小方框其实就是单独的每一个input标签(叫假input标签),每个长度为1,然后上面再写一个大的input标签(叫真实inp ...
vue实现通过手机号发送短信验证码登录
<template><div class="get-mobile" @touchmove.prevent><div class="main& ...
vue页面实现短信验证码60秒倒计时
废话不多说,直接上代码. template <div class='single-wrapper fs14'><div class='single-mb'>短信验证</d ...

Vue 短信验证码组件

Vue 短信验证码组件相关推荐

最新文章

热门文章