vue 简单的滑块拖动验证码

效果

组件

// components/SlidingVerification/index.vue<template><div class="jc-component__range"><div class="jc-range" :class="rangeStatus ? 'success' : ''"><i@mousedown="rangeMove":class="rangeStatus ? successIcon : startIcon"></i>{{ rangeStatus ? successText : startText }}</div></div></template><script>export default {props: {// 成功之后的函数successFun: {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.targetlet startX = e.clientXlet eleWidth = ele.offsetWidthlet parentWidth = ele.parentElement.offsetWidthlet MaxX = parentWidth - eleWidthif (this.rangeStatus) {//不运行return false}document.onmousemove = (e) => {let endX = e.clientXthis.disX = endX - startXif (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 = trueif (this.status) {this.$parent[this.status] = true}//执行成功的函数this.successFun && this.successFun()}document.onmousemove = nulldocument.onmouseup = null}},},}</script><style lang="scss" scoped>@mixin jc-flex {display: flex;justify-content: center;align-items: center;}.jc-component__range {.jc-range {background-color: #e9e9e9;position: relative;transition: 1s all;user-select: none;color: #585858;@include jc-flex;height: 50px; /*no*/&.success {background-color: #3bc923;color: #fff;i {color: #3bc923;}}i {position: absolute;left: 0;width: 50px; /*no*/height: 100%;color: #3fcd26;background-color: #fff;border: 1px solid #d8d8d8;cursor: pointer;font-size: 24px;@include jc-flex;}}}</style>

使用

<JcRange :successFun="verificate_sucess":errorFun="verificate_error"></JcRange>

import JcRange from '@/components/SlidingVerification'methods: {// 验证码verificate_sucess() {console.log('verificate_sucess')},verificate_error() {console.log('verificate_error')},},

至此，一个简单的滑块验证码就完成了