vue 验证码界面实现点击后标灰并设置div按钮不可点击状态

1、先看看效果图未点击获取验证码的按钮状态点击后的不可点击状态2、代码实现<template&

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>

以上这篇vue 验证码界面实现点击后标灰并设置div按钮不可点击状态就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。