vue中使用滑块验证功能

sovereign_jun

于 2024-03-29 22:18:58 发布

阅读量863

点赞数 17

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/sovereign_jun/article/details/137157447

版权

通过npm安装依赖

npm i vue-drag-verify2 -S

在main.js文件中引入，需要确保引入了Vue

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;">
<!--        text是滑块底部的文字，width是滑块的宽度，isPassing是滑块是否通过验证，handlerIcon是拖动时候的图标，successIcon是-->
<!--        验证通过时候的图标，@passcallback是验证通过时候的回调函数。-->
        <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>

页面出现的效果

使用有图片背景的滑块验证码，不用在main.js中添加了，直接中vue组件中使用，安装依赖

npm i vue-drag-verify-img -S

在vue组件的代码

<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: 'https://img1.baidu.com/it/u=3569420573,2690721824&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500'
    }
  },
  // 需要添加在组件中，不然报错
  components: {
    dragVerifyImg
  },
  methods: {
    passcallback() {
      this.$message({
        message: "验证通过",
        type: "success"
      });
    },
    reset() {
      this.isPassing = false;
      this.$refs.dragVerify.reset()
    },
  },
}
</script>
<style>

</style>