4.vue实现基本滑块验证组件(注册验证)

// 基本滑块验证组件
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>