vue实现登录时滑块验证

本文实例为大家分享了vue实现登录时滑块验证的具体代码，供大家参考，具体内容如下

1.效果图

2. 新建 SliderCheck.vue组件

<template><!-- 拖动验证--> <div class="slider-check-box">  <div class="slider-check" :class="rangeStatus ? 'success' : ''">   <i @mousedown="rangeMove" :class="rangeStatus ? successIcon : startIcon"></i>   {{ rangeStatus ? successText : startText }}  </div> </div></template><script>export default { props: {  // 成功之后的函数  successJlymhLubnZFun: {   type: Function  },  //成功图标  successIcon: {   type: String,   default: 'el-icon-success'  },  //成功文字  successText: {   type: String,   default: '验证成功'  },  //开始的图标  startIcon: {   type: String,   default: 'el-icon-d-arrow-right'  },  //开始的文字  startText: {   type: String,   default: '请拖住滑块，拖动到最右边'  },  //失败之后的函数  errorFun: {   type: Function  },  //或者用值来进行监听  status: {   type: String  } }, data() {  return {   disX: 0,   rangeStatus: false  } }, methods: {  //滑块移动  rangeMove(e) {   let ele = e.target   let startX = e.clientX   let eleWidth = ele.offsetWidth   let parentWidth = ele.parentElement.offsetWidth   let MaxXJlymhLubnZ = parentWidth - eleWidth   if (this.rangeStatus) {    //不运行    return false   }   document.onmousemove = e => {    let endX = e.clientX    this.disX = endX - startX    if (this.disX <= 0) {     this.disX = 0    }    if (this.disX >= MaxX - eleWidth) {     //减去滑块的宽度,体验效果更好     this.disX = MaxX    }    ele.style.transition = '.1s all'    ele.style.transform = 'translateX(' + this.disX + 'px)'    e.preventDefault()   }   document.onmouseup = () => {    if (this.disX !== MaxX) {     ele.style.transition = '.5s all'     ele.style.transform = 'translateX(0)'     //执行成功的函数     this.errorFun && this.errorFun()    } else {     this.rangeStatus = true     if (this.status) {      this.$parent[this.status] = true     }     //执行成功的函数     this.successFun && this.successFun()    }    document.onmousemove = null    document.onmouseup = null   }  } }}</script><style lang="scss" scoped>$blue: #198eeb;@mixin jc-flex { display: flex; justify-content: center; align-items: center;}.slider-check-box { .slider-check {  background-color: #e9e9e9;  position: relative;  transition: 1s all;  user-select: none;  color: #585858;  @include jc-flex;  height: 40px;  &.success {   background-color: $blue;   color: #fff;   i {    color: $blue;   }  }  i {   position: absolute;   left: 0;   width: 50px;   height: 100%;   color: $blue;   background-color: #fff;   border: 1px solid #d8d8d8;   cursor: pointer;   font-size: 24px;   @include jc-flex;  } }}</style>

3.在父组件index.vue注册使用

<template> <div>   <SliderCheck :successFun="handleSuccessFun" :errorFun="handleErrorFun"></SliderCheck>  </div></template><script>import SliderCheck from '@/components/test/SliderCheck'export default { name: "index", components:{  SliderCheck, }, data(){  return {}, methods:{  // 滑块验证成功回调  handleSuccessFun() {   console.log('滑动成功')  },  // 滑块验证失败回调  handleErrorFun() {   console.log('滑动失败')  } }}</script><style lang="scss" scoped></style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。