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-popupv-model="showPopup"closeableclose-icon="close"class="popup-slide-box"@close="close"><div class="popup-title">请完成安全验证</div><divclass="popup-content"@touchmove.prevent><slide-verifyref="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时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5accuracy: 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>