vue滑块验证，图片验证，图片旋转验证，滑动验证

完整demo：https://download.csdn.net/download/weixin_44590591/85224724

注：Vue3均使用按需引入

1、基本滑块验证组件

// 安装
npm i vue-drag-verify2 -S

// 引用： main.js 中引用import Vue from 'vue'
import dragVerify from 'vue-drag-verify2'
Vue.use(dragVerify)

<template><div><h3>模块验证：</h3><div class="verifybox"><el-row style="margin-top:10px;"><drag-verify ref="dragVerify" :width="300" :isPassing.sync="isPassing" text="请按住滑块拖动" successText="验证通过"handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check" @passcallback="passcallback"><i v-show="!isPassing" slot="textBefore" class="el-icon-lock"></i></drag-verify></el-row><el-button style="margin-top:5px;margin-left:10px;" size="small" @click="reset">还原</el-button></div></div>
</template><script>export default {data() {return {isPassing: false}},methods: {passcallback() {this.$message({message: "验证通过",type: "success"});},reset() {this.isPassing = false;this.$refs.dragVerify.reset()},},}
</script>
<style>.verifybox {display: flex;}
</style>

2、图片滑块组件

// 安装
npm i vue-drag-verify-img -S

<template><div><h3>图片滑块：</h3><dragVerifyImg ref="dragVerify" :imgsrc=" imgsrc" :isPassing.sync="isPassing" :showRefresh="true" text="请按住滑块拖动"successText="验证通过" handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check"@passcallback="passcallback"></dragVerifyImg><el-button type="primary" @click="reset">还原</el-button></div>
</template><script>import dragVerifyImg from 'vue-drag-verify-img'export default {data() {return {isPassing: false,value: "",imgsrc: "http://celiang.oss-cn-hangzhou.aliyuncs.com/measurement/2022-04/26/y3zT5phpCPlkxi1650939813220426.jpg"}},components: {dragVerifyImg},methods: {passcallback() {this.$message({message: "验证通过",type: "success"});},reset() {this.isPassing = false;this.$refs.dragVerify.reset()},},}
</script>
<style>.verifybox {display: flex;}
</style>

3、基本滑块验证组件(拼图)

// 安装
npm i vue-drag-verify-img-chip -S

<template><div><h3> 基本滑块验证组件(拼图)：</h3><drag-verify-img-chip ref="dragVerify" :imgsrc="imgsrc" :isPassing.sync="isPassing" :showRefresh="true":barWidth="40" text="请按住滑块拖动" successText="验证通过" handlerIcon="el-icon-d-arrow-right"successIcon="el-icon-circle-check" @refresh="reimg" @passcallback="pass"></drag-verify-img-chip><el-button type="primary" @click="reset">还原</el-button></div>
</template><script>import dragVerifyImgChip from 'vue-drag-verify-img-chip'export default {data() {return {isPassing: false,value: "",imgsrc: "http://celiang.oss-cn-hangzhou.aliyuncs.com/measurement/2022-04/26/uAFwlphpXmYIyH1650941449220426.jpg"}},components: {dragVerifyImgChip},methods: {passcallback() {this.$message({message: "验证通过",type: "success"});},reimg() {console(213231213)},pass() {},reset() {this.isPassing = false;this.$refs.dragVerify.reset()},},}
</script>
<style>.verifybox {display: flex;}
</style>

4、旋转图片滑块组件

// 安装
npm i vue-drag-verify-img -S

// 引用： main.js 中引用
<template><div><h3> 旋转图片滑块组件：</h3><drag-verify-rotate ref="sss" :imgsrc="imgsrc" :isPassing.sync="isPassing" text="请按住滑块拖动" successText="验证通过"handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check" @refresh="reimg" @passcallback="pass"></drag-verify-rotate><el-button type="primary" @click="reset">还原</el-button></div>
</template><script>import dragVerifyRotate from 'vue-drag-verify-img-rotate'export default {data() {return {isPassing: false,value: "",// 图片1:1imgsrc: "https://yimijianfang.github.io/vue-drag-verify/static/img/111.22e0821.jpg"}},components: {dragVerifyRotate},methods: {passcallback() {this.$message({message: "验证通过",type: "success"});},reimg() {console(213231213)},pass() {},reset() {this.isPassing = false;this.$refs.dragVerify.reset()},},}
</script>
<style>.verifybox {display: flex;}
</style>

【Vue实用功能】vue滑块组件验证相关推荐

vue 实现一个滑块拖动验证功能
具体的代码如下: <!DOCTYPE html> <html><head><meta charset="UTF-8"><tit ...
Vue基于ElementUI组件实现滑块登录验证组件
引言在实际项目应用开发中,为了防止用户频繁发起登录请求,导致后端登录访问压力瞬时过大,我们可以设计一些验证规则防刷,最常见的方式是通过输入验证码的方式降低刷新频率,后台通过返回不同的验证码从而降低用 ...
【VUE】vue实现登录滑动拼图验证的两种方法，纯前端组件验证以及前后端同时验证
vue实现登录滑动拼图验证的两种方法: 第一种是纯前端组件验证,只能区分是人为操作还是机器操作. 第二种是前后端同时验证,这种方法加上后端校验相对会更安全一些.(注:在最底部加上了同时兼容移动端的方法 ...
css3 滑动验证,Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
vue验证滑块功能,在生活中很多地方都可以见到,那么使用起来非常方便,基于vue如何实现滑块验证呢?下面通过代码给大家讲解. 效果图如下所示: 拖动前拖动后代码引用的css与js都是线上的将代码 ...
vue可视化拖拽组件模板,vue自定义下拉框组件
怎样利用Vue动态生成form表单 . $formCreate参数rules 表单生成规则[inputRule,selectRule,...]options 初始化配置参数(详细见底部createOp ...
value数字 vue_基于Vue开发数字输入框组件
随着 vue 越来越火热, 相关组件库也非常多啦, 只用轮子怎么够, 还是要造起来!!! 1.概述 vue组件开发的api:props.events和slots 2.组件代码效果: (1)index ...
Vue.js——60分钟组件快速入门（上篇）
组件简介组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢? 组件可以扩展HTM ...
手把手教你用Vue.js封装Form组件
前言: 在日常使用vue开发WEB项目中,经常会有提交表单的需求.我们可以使用 iview 或者 element 等组件库来完成相关需求:但我们往往忽略了其中的实现逻辑,如果想深入了解其中的实现细节, ...
vue中文翻译拼音组件_Vue组件可简化文本的翻译方式：通过内联翻译
vue中文翻译拼音组件 @ alidrus / vue-simple-inline-translation (@alidrus/vue-simple-inline-translation) A Vue ...

【Vue实用功能】vue滑块组件验证

vue滑块验证，图片验证，图片旋转验证，滑动验证

1、基本滑块验证组件

2、图片滑块组件

3、基本滑块验证组件(拼图)

4、旋转图片滑块组件

【Vue实用功能】vue滑块组件验证相关推荐

最新文章

热门文章

【Vue实用功能】vue滑块组件验证

vue滑块验证，图片验证，图片旋转验证，滑动验证

1、 基本滑块验证组件

2、图片滑块组件

3、基本滑块验证组件(拼图)

4、旋转图片滑块组件

【Vue实用功能】vue滑块组件验证相关推荐

最新文章

热门文章

1、基本滑块验证组件