Vue实现简易验证码定时器

<template>

    <div>

        searchContainer

        <mt-button :type="type"  size="small" :disabled='flag' @click="test" style="width:80px;">{{value}}</mt-button>

    </div>

</template>

<script>

export default {

    data() {

        return {

            value:"点击",

            timer:'',

            type:'primary',

            flag:false

        }

    },

   

    methods: {

        test(){

            let time = 10;

            if(this.timer!=''){

                clearInterval(this.timer)

            }

            this.flag = true

            this.timer = setInterval(()=>{

                this.value = time;

                time--;

                this.callback(time)

            },1000)

        },

        callback(time){

            if(time==-1){

                clearInterval(this.timer)

                this.flag = false

                this.value = "点击"

            }

        }

    },

}

</script>

<style>

</style>