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 相关文章推荐
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
详解vue微信网页授权最终解决方案
Jun 16 Javascript
js实现简单分页导航栏效果
Jun 28 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 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
PHP 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
二招解决php乱码问题
2012/03/25 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
php去除数组中重复数据
2014/11/18 PHP
PHP实现微信发红包程序
2015/08/24 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
Jquery ui css framework
2010/06/28 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
从零学Python之入门(五)缩进和选择
2014/05/27 Python
通过C++学习Python
2015/01/20 Python
win与linux系统中python requests 安装
2016/12/04 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
详解python 中in 的 用法
2019/12/12 Python
python如何实现word批量转HTML
2020/09/30 Python
python实现发送邮件
2021/03/02 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
大学生自我鉴定范文
2013/12/28 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
优秀团队获奖感言
2014/02/19 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书