一、前言

vue已经更新到3.2+，使用了script的setup属性语法，支持typescript，但是网上已有的大部分滑动验证组件都是旧版本，还不支持触摸，所以决定写一个：

支持vue3.2+语法
支持typescript
支持pc/手机（自动适配）
即插即用

的滑动验证组件，方便大家。当然，这个只是静态的校验，如果需要动态校验，需要和后端配合。

二、成果展示

三、组件使用

import组件，然后 <dragVerify v-model:value="form.isVerifyPass"></dragVerify>使用即可，其中v-model:value为双向绑定结果
支持属性：

successIcon 成功图标{string} 默认值 ‘iconfont icon-status-nor’
successText 成功文字string} 默认值 ‘验证成功’
startIcon 开始的图标{string} 默认值 ‘iconfont icon-login-slid’
startText 开始的文字{string} 默认值 ‘拖动滑块到最右边’

<template><div class="test"><h3>vue3.2+ 滑动验证组件，pc/手机通用</h3><div class="content"><dragVerify v-model:value="form.isVerifyPass"></dragVerify></div><div>校验结果：{{ form.isVerifyPass }}</div></div>
</template><script lang="ts" setup>
import { reactive } from 'vue'
import dragVerify from '@/components/dragVerify.vue'// 提交表单数据
const form = reactive({isVerifyPass: false, // 滑块验证结果
})
</script>

四、vue3.2+ 滑动验证组件源码


<template><div class="drag-verify"><div class="range" :class="verifyResult ? 'success' : ''"><div class="block" @mousedown="onStart" @touchstart="onStart"><i :class="verifyResult ? successIcon : startIcon"></i></div><span class="text">{{ verifyResult ? successText : startText }}</span></div></div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'const emit = defineEmits(['update:value'])
defineProps({value: {type: Boolean,defalut: false,},// 成功图标successIcon: {type: String,default: 'iconfont icon-status-nor',},// 成功文字successText: {type: String,default: '验证成功',},// 开始的图标startIcon: {type: String,default: 'iconfont icon-login-slid',},// 开始的文字startText: {type: String,default: '拖动滑块到最右边',},
})const verifyResult = ref(false) // 验证结果
const isTouch = 'ontouchstart' in document.documentElement
const moveEvent = isTouch ? 'touchmove' : 'mousemove'
const upEvent = isTouch ? 'touchend' : 'mouseup'// 滑块触摸开始
const onStart = (ev: MouseEvent | TouchEvent) => {let disX = 0 // 滑块移动距离const iconWidth = 40 // 滑动图标宽度const ele = document.querySelector('.drag-verify .block') as HTMLElementconst startX = (ev as MouseEvent).clientX || (ev as TouchEvent).touches[0].pageXconst parentWidth = ele.offsetWidthconst MaxX = parentWidth - iconWidthif (verifyResult.value) {return false}// 滑块触摸移动const onMove = (e: MouseEvent | TouchEvent) => {const endX = (e as MouseEvent).clientX || (e as TouchEvent).touches[0].pageXdisX = endX - startXif (disX <= 0) {disX = 0}if (disX >= MaxX - iconWidth) {disX = MaxX}ele.style.transition = '.1s all'ele.style.transform = `translateX(${disX}px)`}// 滑块触摸结束const onEnd = () => {if (disX !== MaxX) {ele.style.transition = '.5s all'ele.style.transform = 'translateX(0)'} else {// 执行成功verifyResult.value = trueemit('update:value', verifyResult.value)}document.removeEventListener(moveEvent, onMove)document.removeEventListener(upEvent, onEnd)}document.addEventListener(moveEvent, onMove)document.addEventListener(upEvent, onEnd)
}
</script>
<style lang="scss" scoped>
$color-primary: #03c5e5;@mixin flex {display: flex;justify-content: center;align-items: center;
}
.drag-verify {width: 100%;.range {background-color: #ececee;position: relative;border-radius: 4px;transition: 1s all;user-select: none;color: #666;overflow: hidden;@include flex;height: 40px;&.success {background-color: $color-primary;color: #fff;.text {position: relative;z-index: 1;}.block i {color: $color-primary;}}.block {display: block;position: absolute;left: calc(-100% + 40px);width: 100%;height: 100%;background: $color-primary;border-radius: 4px;overflow: hidden;i {position: absolute;right: 0;width: 40px;height: 100%;font-size: 20px;color: #c8c9cc;background-color: #fff;border: 1px solid #e5e5e5;border-radius: 4px;cursor: pointer;@include flex;}}}
}
</style>

五、最后，点个赞

如果帮到你，点个赞再走！

vue3.2+ 滑动验证组件，pc/手机通用，即插即用相关推荐

【Vue3】滑动验证组件 | 滑动验证
前言滑块验证不只判断是否滑动到尾部,真正的目的是检测用户行为,检测行为是人为.脚本.还是其它. 防止使用脚本大量注册.请求等 .比如发送请求时,判断用户在某个页面停留了多长时间.登录.注册时是否点击 ...
vue3 滑动验证组件
vue3拖动滑块进行验证组件效果展示源码 <template><div class="slider-verification" ref="slide ...
滑动验证+短信验证码接入=复制粘贴（Java）
PC版滑动验证的实现简介滑动验证是基于人机识别技术开发的智能验证码产品.用户通过简单的右滑交互,无需思考即可通过验证. 资源引入说明使用PC版滑动验证码,需要引入以下js资源,为保证服务功能最优 ...
微信小程序图片验证组件封装
一.图片滑动验证组件延迟页面展示或者延缓并发处理.当滑动图片到空缺位置后执行加载或者验证. 二.封装源码 1.wxml <!--遮罩层,弹框图片背景,滑动框图片比例:16:9 1.777777 ...
html+js实现手机浏览器的滑动验证
前言前两天发了一篇关于适用于PC浏览器的滑动验证的文章.这两天修改之后,改为了适用于手机浏览器的滑动验证功能. 一.原理简单介绍一下实现的原理,就是获取一张本地的图片之后,随机截取一个区域,作为需 ...
java web 数据验证_kpvalidate开辟验证组件,通用Java Web请求服务器端数据验证组件...
小菜利用工作之余编写了一款Java小插件,主要是用来验证Web请求的数据,是在服务器端进行验证,不是简单的浏览器端验证. 小菜编写的仅仅是一款非常初级的组件而已,但小菜为它写了详细的说明文档. 简单介 ...
PC项目——vue 脚手架中实现阿里云人机滑动验证
转自๑柯帆๑ 找半天才找到这个可用的 vue 脚手架中实现阿里云人机滑动验证一.报错问题解决描述:照官网写的引入方式引入vue报错 AWSC is not define 解决:.html文件引入s ...
基于vue3的京东nutui组件库的表单校验规则：怎样进行表单验证？怎样只使用指定的某一个规则进行校验呢？
官网: NutUI - 移动端 Vue2.Vue3.小程序组件库京东风格的轻量级移动端 Vue.React 组件库https://nutui.jd.com/#/component/form 用法: ...
vue 后台登录滑动验证
1.引入vue-monoplasty-slide-verify组件到项目里先使用命令行安装:npm install --save vue-monoplasty-slide-verify 2.在mai ...

vue3.2+ 滑动验证组件，pc/手机通用，即插即用

vue3.2+ 滑动验证组件，pc/手机通用，即插即用

一、前言

二、成果展示

三、组件使用

四、vue3.2+ 滑动验证组件源码

五、最后，点个赞

vue3.2+ 滑动验证组件，pc/手机通用，即插即用相关推荐

最新文章

热门文章

vue3.2+ 滑动验证组件，pc/手机通用，即插即用

vue3.2+ 滑动验证组件，pc/手机通用，即插即用

一、前言

二、成果展示

三、组件使用

四、vue3.2+ 滑动验证组件 源码

五、最后，点个赞

vue3.2+ 滑动验证组件，pc/手机通用，即插即用相关推荐

最新文章

热门文章

四、vue3.2+ 滑动验证组件源码