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


Posted in Javascript onOctober 28, 2019

1、先看看效果图

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

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

点击后的不可点击状态

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

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按钮不可点击状态就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 Javascript
design vue 表格开启列排序的操作
Oct 28 Javascript
vue动态禁用控件绑定disable的例子
Oct 28 #Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 #Javascript
关于vue组件事件属性穿透详解
Oct 28 #Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 #Javascript
vue h5移动端禁止缩放代码
Oct 28 #Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 #Javascript
element-ui 本地化使用教程详解
Oct 28 #Javascript
You might like
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
限制文本框输入N个字符的js代码
2010/05/13 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
简单的python后台管理程序
2017/04/13 Python
Sanic框架路由用法实例分析
2018/07/16 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
python解包概念及实例
2021/02/17 Python
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
计算机毕业大学生推荐信
2013/12/01 职场文书
投资合作协议书
2014/04/17 职场文书
工作求职自荐信
2014/06/13 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
公司会议开幕词
2016/03/03 职场文书
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python