【原创】【滑块验证码】

npm i vue-monoplasty-slide-verify

main.js引入

import SlideVerify from 'vue-monoplasty-slide-verify'

Vue.use(SlideVerify)

 

父组件

<slide-verify ref="slideverify"></slide-verify>

import slideVerify from "./slide-verify"

 

子组件

<template>

  <div style="width: 100%; overflow: hidden">

    <slide-verify

      ref="slideblock"

      @again="onAgain"

      @fulfilled="onFulfilled"

      @success="onSuccess"

      @fail="onFail"

      @refresh="onRefresh"

      :slider-text="text"

      :accuracy="accuracy"

    ></slide-verify>

    <button @click="handleClick">在父组件可以点我刷新哦</button>

    <div>{{ msg }}</div>

  </div>

</template>

<script>

export default {

  name: "slide",

  data() {

    return {

      msg: "",

      text: "向右滑动->",

      // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5

      accuracy: 1,

    };

  },

  methods: {

    onSuccess(times) {

      console.log("验证通过，耗时" + times + "毫秒");

      let time = (times / 1000).toFixed(1);

      let msg = "login success, 耗时" + time + "s";

      this.msg = msg;

    },

    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>