1、先看看效果图

未点击获取验证码的按钮状态

点击后的不可点击状态

2、代码实现

<template>
	<div class="my-code">
		   <input class="my-code-input" type="text" v-model="login_form.captcha" placeholder="Your Captcha">
		   <div class="my-code-get" @click="get_captcha" id="new_yan">
		       <span v-show="show">Get Captcha</span>
		       <span v-show="!show">{{ count }} s</span>
		   </div>
	</div>
</template>

<script>
    import store from '@/store'
    import Vue from 'vue'
    import $ from 'jquery'

    export default {
        name: "register",
        data () {
            return {
                show: true,
                count: 60,
                timer: null,
            }
        },
        methods: {
            get_captcha() {
                 if (this.login_form.username === '' ) {
                    alert('Phone number or mailbox cannot be empty')
                } else {
                    if(this.timer == null){
                        getValidate(this.login_form.username).then(response => {
                            const data = response.data
                            console.log(data)
                            console.log('成功')
                        }).catch(error => {
                            console.log(error)
                            alert(error)
                        })
                    }  
                    if (!this.timer) {
                        this.count = 60;
                        this.show = false;
                        $(".my-code-get").addClass("huise")
                        // 将鼠标设置为不可点击状态
                        document.getElementById('new_yan').style.cursor = 'not-allowed'
                        this.timer = setInterval(() => {
                            if (this.count > 0 && this.count <= 60) {
                                this.count--
                            } else {
                                this.show = true
                                clearInterval(this.timer)
                                this.timer = null
                            }
                        }, 1000)
                    }
                }
            }
        },
        created: function() {
        },
        watch:{
            timer: function(val){
                console.log(val)
                if(val == null){
                     //  监听timer变化，移除不可点击样式
                    $(".my-code-get").removeClass("huise")
                    document.getElementById('new_yan').style.cursor = 'pointer'
                }
        　　}
        }
    }
</script>

<style scoped>
    .my-input{
        text-align: left;
        display: block;
        width: 400px;
        height: 35px;
        padding: 3px;
        margin: 20px calc(50% - 200px) 20px calc(50% - 200px);
        background:none;  
        outline:none;  
        border:0px;
        border-bottom: 2px solid #dcdcdc;
        border-bottom-left-radius: 1px;
        border-bottom-right-radius: 1px;
        box-sizing: border-box;
        font-family: PingFangSC-Regular;
        font-size: 16px;
    }
    .my-code{
        overflow: hidden;
    }
    .my-code-get{
        float: left;
        width: 120px;
        height: 35px;
        background-color: rgb(7, 187, 127);
        margin: 0 auto 20px 0;
        line-height: 35px;
        font-family: PingFangSC-Regular;
        color: #ffffff;
        border-radius: 5px;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
    }
    .my-code-get:active{
        background-color: #0F996B;
    }
    .my-code-get:hover{
        cursor: pointer;
    }
    .my-code-input{
        float: left;
        text-align: left;
        display: block;
        width: 280px;
        height: 35px;
        padding: 3px;
        margin: 0 auto 20px calc(50% - 200px);
        background:none;  
        outline:none;  
        border:0px;
        border-bottom: 2px solid #dcdcdc;
        border-bottom-left-radius: 1px;
        border-bottom-right-radius: 1px;
        box-sizing: border-box;
        font-family: PingFangSC-Regular;
        font-size: 16px;
    }
    .my-code-input:focus{
        border-bottom: 2px solid #0F996B;
        border-bottom-left-radius: 1px;
        border-bottom-right-radius: 1px;
    }
    .huise{
        background-color: #dcdcdc !important;
        color: black;
    }
</style>