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傳參（均為可選）

自定義回調函數