生鲜水果配送小程序_Vue 短信验证码组件开发详解

Vue 短信验证码组件开发详解     投稿:mrr   Vue.js(读音 /vju #720;/, 类似于 view)是一个构建数据驱动的 web 界面的库。这篇文章主要介绍了Vue 短信验证码组件开发详解,需要的朋友可以参考下

Vue.js(读音 /vju /, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。

摘要:

1、该组件基于Vue 2.1.X版本;

1、 Vue 组件代码如下:

ponent('timerBtn',{
 template: ' button v-on:click="run" :disabled="disabled || time 0" {{ text }} /button ',
 pro凡科抠图: {
 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" v-on:run="sendCode" 
:disabled="disabled" :second="60" /timer-btn 

disabled 建议不要绑定,我们可以通过调用组件的setDisabled方法来切换按钮可用状态;

second 初始值60s 没特别值可以不绑定;

所以我们可以在HTML页面这样:

 timer-btn ref="timerbtn" 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(); //停止倒计时
});

以上所述是小编给大家介绍的Vue 短信验证码组件开发详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


相关阅读