vue中，移动端h5项目用 vue-monoplasty-slide-verify 插件 实现拼图滑块验证

git源码、文档地址： https://github.com/monoplasty/vue-monoplasty-slide-verify

实现效果如下：

使用：
1.安装插件：npm install --save vue-monoplasty-slide-verify。
2.引入插件：在 main.js 文件中引入插件。

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

3.使用插件：将滑块封装成一个子组件，在父组件登录页面中引用该组件，并监听拼图成功函数。

<template>
  <van-popup
    v-model="showPopup"
    closeable
    close-icon="close"
    class="popup-slide-box"
    @close="close"
  >
    <div class="popup-title">请完成安全验证</div>
    <div
      class="popup-content"
      @touchmove.prevent
    >
      <slide-verify
        ref="slideblock"
        :imgs='slideImgs'
        @again="onAgain"
        @fulfilled="onFulfilled"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
        :accuracy="accuracy"
        :slider-text="text"
      ></slide-verify>
      <!-- <div>{{msg}}</div> -->
      <button @click="handleClick"></button>
    </div>
  </van-popup>
</template>

<script>
import { Popup } from "vant";

export default {
  name: "Index",
  components: {
    [Popup.name]: Popup,
  },
  data() {
    return {
      showPopup: false,
      // msg: "",
      text: "向右滑",
      // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
      accuracy: 3,
      slideImgs: [""], // 可自定义拼图图片数组，未传则使用插件内默认的图片数组
    };
  },
  methods: {
    close() {
      this.showPopup = false;
    },
    onSuccess(times) {
      // this.msg = "login success, 耗时${(times / 1000).toFixed(1)}s";
      console.log("去登录");
      this.$emit("slideSuccess"); // 验证成功向父组件发送函数
    },
    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();
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.popup-slide-box {
  background: #ffffff;
  width: 310px * 2;
  height: 267px * 2;
  border-radius: 24px;
  text-align: center;
  .popup-title {
    font-size: 32px;
    color: #333333;
    height: 108px;
    line-height: 108px;
    border-bottom: 1px solid #efefef;
    font-weight: bold;
  }
  .popup-content {
    width: 100%;
  }
}
</style>