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

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>