// 基本滑块验证组件
npm i vue-drag-verify2 -S (应该是下载这个)
// 图片滑块组件
npm i vue-drag-verify-img -S
// 基本滑块验证组件(拼图)
npm i vue-drag-verify-img-chip -S
// 旋转图片滑块组件
npm i vue-drag-verify-img-rotate -S
<template>
<div>
<drag-verify ref="dragVerify7" :width="300" :isPassing.sync="isPassing7" text="请按住滑块拖动" successText="验证通过"
handlerIcon="el-icon-d-arrow-right"
successIcon="el-icon-circle-check"
@passcallback="passcallback3" >
</drag-verify>
<!-- <el-button style="margin-top:5px;" size="small" @click="reset">还原</el-button> -->
</div>
</template>
<script>
import dragVerify from 'vue-drag-verify2'
export default {
data() {
return {
isPassing7: false
}
},
components: {
dragVerify
},
methods: {
passcallback3() {
this.$message({
message: "验证通过",
type: "success"
});
},
reset() {
this.isPassing7 = false;
this.$refs.dragVerify7.reset()
},
},
}
</script>