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 相关文章推荐
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
jQuery插件开发全解析
Oct 10 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
简述JS浏览器的三种弹窗
Jul 15 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动态生成静态HTML网页的代码
2010/03/04 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
Python 异常处理的实例详解
2017/09/11 Python
flask应用部署到服务器的方法
2019/07/12 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
shell变量的作用空间是什么
2013/08/17 面试题
实习鉴定评语
2014/01/19 职场文书
出纳岗位职责
2015/01/31 职场文书
三潭印月的导游词
2015/02/12 职场文书
领导视察通讯稿
2015/07/18 职场文书
新兵入伍决心书
2015/09/22 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python