vue 滑块验证码

本文转载自： https://blog.csdn.net/monoplasty/article/details/85016089

预览

基于滑动式的验证码，免于字母验证码的繁琐输入 用于网页注册或者登录

目前仅前端实现，支持移动端滑动事件。版本V1.1.2

安装

npm install --save vue-monoplasty-slide-verify

main.js 全局注册

import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify)

 

使用方法

<template>
  <div class="sliding-validation">
    <slide-verify 
      ref="slideblock"
      :w="fullWidth"
      @again="onAgain"
      @fulfilled="onFulfilled"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
      :accuracy="accuracy"
      :slider-text="text"
      :imgs="imgList"
    ></slide-verify>
    <div>{{msg}}</div>
    <button @click="handleClick">在父组件可以点我刷新哦</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
      return {
        fullWidth: '',
        msg: '',
        text: '向右滑',
        // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
        accuracy: 1,
        imgList: [
          "../../static/img/图片1.jpg",
          "../../static/img/图片2.jpg",
          "../../static/img/图片3.jpg",
          "../../static/img/1.jpg",
          "../../static/img/2.jpg",
          "../../static/img/3.jpg",
          "../../static/img/4.jpg",
          "../../static/img/5.jpg",
          "../../static/img/6.jpg",
          "../../static/img/7.jpg",
          "../../static/img/8.jpg",
          "../../static/img/9.jpg",
        ],
      }
  },
  created() {
    // 获取页面宽度
    this.fullWidth = document.documentElement.clientWidth
  },
  methods: {
      onSuccess(){
          console.log('验证通过');
          this.msg = 'login success'
      },
      onFail(){
          console.log('验证不通过');
          this.msg = ''
      },
      onRefresh(){
          console.log('点击了刷新小图标');
          this.msg = ''
      },
      onFulfilled() {
          console.log('刷新成功啦！');
      },
      onAgain() {
          console.log('检测到非人为操作的哦！');
          this.msg = 'try again';
          // 刷新
          this.$refs.slideblock.reset();
      },
      handleClick() {
        // 父组件直接可以调用刷新方法
          this.$refs.slideblock.reset();
      },
  }
}
</script>

<style lang='less' scoped>
#slideVerify {
  // 容器宽度
  width: 100%;
  overflow: hidden;
  // 滑块宽度
  /deep/ .slide-verify-slider {
    width: 100%;
    margin: 0;
  }
}
</style>

 

props传参（均为可选）

自定义回调函数