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:1
imgsrc: "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>