zoukankan      html  css  js  c++  java
  • 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 后重获取' : '获取验证码';
            }
        }
    });
    <timer-btn ref="timerbtn" class="btn btn-default" v-on:run="sendCode" ></timer-btn>
    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(); //停止倒计时
                    }
                });
            },
        }
    });
  • 相关阅读:
    值传递
    抽象类
    面向对象三大特征(二)--继承
    单例设计模式
    神奇的main方法详解
    面向对象的三大特征 ---- 封装
    变量、方法以及静态和非静态
    面向对象编程-类和对象
    数组
    力扣题库刷题(随时记录)
  • 原文地址:https://www.cnblogs.com/happyhaibei/p/6869469.html
Copyright © 2011-2022 走看看