滑块&四位验证码

/*
最外层div包裹里面：
drag_text 始终 = 最外层容器宽度（w：346  h：40） {开始验证/验证通过}
drag_greenbg width:0 => 306
drag_handler ref=“moveDiv” 滑块 初始两个class样式 handler 和 handle-bg（base64编码的图片）
  .handler_bg {
    background: #fff
      url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==')
      no-repeat center;
  }

估计当 drag_greenbg width=306时  判断验证成功 加上 handle-ok-bg（先前的图片就被覆盖吧）

max-width：最外层div -滑块=340

流程:
1.给滑块绑定@mousedown ,用$event传递原生dom点击事件（阻止文字被选中）
记下beginClientX ，mouseMovestate=true
2.mounted中 有鼠标移动和鼠标抬起监听事件
3.mouseMove 触发mouseMoveFn
比较 拖拽方块的width 和 maxwidth（mouted）

mouseMoveFn：
比较 width 和 maxwidth
如果 width > 0 && <= maxWidth(width > 0条件和=maxWidth去掉了，不影响)
用document.xxx.style.left    控制滑块的位置
用document.xxx.style.width    控制绿色背景条的宽度
如果 width > maxwidth
调用成功函数

successFunction：
(1)this.confirmSuccess = true   用这个来控制handler_ok_bg类（图片）的增加
this.confirmSuccess = false  起初
:class="{'handler_ok_bg':confirmSuccess}"   =》这个是控制这个类是否显示
:class="xxx?y1:y2"  这个是切换  或许可以把前者稍加改造
(2)移除mousemove和mouseup（兼容性）
(3)docuemnt.xxx.style.color="#fff"  字体白色
滑块 和 绿色背景条的宽度又设置 等于 maxWidth
      document.getElementsByClassName('handler')[0].style.left =
        this.maxwidth + 'px'
      document.getElementsByClassName('drag_bg')[0].style.width =
        this.maxwidth + 'px'
派发事件：
this.$emit('success')
/*
$event
1.将原生dom事件传入事件处理方法中
<div @click="getDom($event)">按钮</div>
getDom(e){
    console.log(e.target.value)
    //获取值——————子组件向父组件传值
    或者 e.preventDefault&e.preventDefault()
    //阻止默认点击事件

}
通过ref来获取值
<div @click=“getDom”  ref=‘xxx’>
$this.ref.xxx.value

鼠标点下时，触发mouseDown事件，通过$event传入原生dom点击事件
“请向右拖动” 置空

moveState = true
计算出鼠标据窗口左侧的宽度 clientX
 */
/*
切换 icon/字体/背景图片
我的2种 那2种
 */

/*
created 在模板渲染成html前调用，这时一些dom节点还没有创建，可以初始化属性、数据
mounted 模板渲染成html后调用，通常是对html的dom节点的操作，求它的宽、高什么的

methods中四个：
mouseDown
mouseUp
mouseMove
success（移除监听器 再 派发事件）
mouted中：
监听mousedown，执行mousedownFn
监听mouseup，执行mouseupFn

 */

/*
发个参数给后台 说明滑块是否验证
滑块组件后有<el-input>  绑定v-model formData.sVerify  display:none

 */

/*
滑块 + 验证码

<el-button type="primary" class="w135" :disabled="count>0" @click="sendCodeFn">{{btnTxt}}</el-button>
//触发方法，改变btn显示内容
  computed: {
    btnTxt() {
      if (this.count) {
        return `${this.count}秒后重新获取`
      } else {
        return this.btnTipTxt
      }
    }
  },

  props: {
    btnTipTxt: {
      type: String,
      default: '发送验证码'
    }
  },

 //count值在另一个方法中被求出
 this.count = second ? second : TIME_COUNT（//60）
 */

/*
仿刷新
// TIME
const TIME_KEY = 'TIME_KEY'

    // 标记时间(用于防刷新)
    singTime() {
      // 存储时间
      setLocalStorage(TIME_KEY, new Date().getTime())
    },
当点击“获取验证码”  localStorage中标记当前时间

// 更改倒计时时间
const TIME_COUNT = 60

  data() {
    return {
      tiem: 60,
      count: '', // 初始化次数
      timer: null
    }
  }

   created() {
    // 检查获取验证码时间间隔
    this.checkSingTime()
检查时间挂在created，当第一次点击“获取验证码”或者再次刷新，都有TIME_KEY并且（获取到）
  },

     // 检查时间(防刷新)
    checkSingTime() {
      let _time = getLocalStorage(TIME_KEY) - 0
      if (_time) {
        // 两个时间戳相减 除1000 后取整即可
        let second =
          TIME_COUNT - parseInt((new Date().getTime() - _time) / 1000)
当前的时间-标记的当时点击时间（unit：ms）/1000        =>s   过去多少秒
second=还剩多少秒
        if (second > 0) {
          this.countDownFn(second)
        } else {
          removeLocalStorage(TIME_KEY)
        }
      }
    }

    // 倒计时
    countDownFn(second, url) {
      if (!this.timer) {
        this.count = second ? second : TIME_COUNT
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            clearInterval(this.timer) // 清除定时器
            this.timer = null
            removeLocalStorage(TIME_KEY)
            // 需要跳转传入url
            if (url) {
              window.location.href = url
            }
          }
        }, 1000)
      }
    },  
    每过1秒，setInterval=》count就减1

总结：

滑块验证、图片验证码都是防止高频操作
分三个步骤，邮箱验证=》发送验证码到邮箱，正确=》下一步=》重置密码，提交完成

用饿了吗 步骤条，有个属性是active 值0、1、2、3，加上v-if 来决定显示那个步骤的页面

有滑块、发送验证码、用canvas生成验证码组件

滑块没有实际功能，主要用鼠标事件、监听器、脚本化css（改变滑过的绿色背景条宽度和滑块左边距）、窗口属性ClientX（用这个获取滑块距离容器左边的距离，如果等于
或大于滑动的最大距离，说明滑到头了，这时滑块的背景换成一张带对勾的图片），如果中途松开鼠标，监听到mouseup事件，比较出滑动距离不等于
滑动最大距离，用style.width、style.left把滑块和通过背景条都变成0
滑动条下有input标签，但设置成display:none，有实际功能的是它。
它v-modle一个值，滑动条验证通过，它被设为1，传给后台
如果滑动条没有通过验证，那input v-model的值是空，饿了吗 对这一项的校验不会通过，不会进入下一步
 
注意派发事件 和$event传递原生dom点击事件，preventDefault阻止文字被默认选中

验证码做了防刷新
点击“获取验证码”时，new Date().getTime把这个时间存到localStorage里，命名TIME_KEY
created中挂载一个检查获取验证码时间间隔的函数
每次刷新时，都会调用这个函数，getLocalStorage获取到第一次点击的时间
倒计时second=60（time_count）-（现在的时间-TIME_KEY）/1000
如果second<=0 说明这次刷新距离上一次过了60s，就移除localstorage中的TIME_KEY，并且按钮那里恢复成“重新获取验证码”

（（重新获取验证码  这里用了prop属性，type是string，default就是这句话  如果没有second倒计时这个数值，那用prop就默认把按钮
填上“重新获取验证码”这句话

如果second>0   说明距离上一次获取验证码不足60s   就调用函数，把这个重新获取到的倒计时时间传进去，
再调用setInterval，每过1s，在这个时间基础上-1，这个时间就显示到按钮上
但是每次-1前都要判断这个时间是否>0,并且（<time_count）,这样才能减
如果不是，说明倒计时间结束了到0了，把消除定时器和当时localstorage里存下的时间
视情况可以传入url，让它在读秒结束后可以跳转到其他页面

 

修改密码、重置密码、登录（验证密码）

 */