一、背景

在前面的一篇文章浅析用户登录功能实现中，我们提到了图片滑块验证，以优化我们的项目。当时是没有相关图片滑块验证的文章的，那在这里就把这个坑填一下，下面介绍一下Nuxt项目中整合图片滑块验证。

二、整合流程2.1、选型

这里我们使用vue-monoplasty-slide-verify来实现图片滑动验证，这是一款基于滑动式的验证码，免于字母验证码的繁琐输入，用于网页注册或者登录。这里贴一下其gitee项目地址：

2.2、组件安装及引入

安装：

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

使用页面进行引入：

import Vue from 'vue';

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

Vue.use(SlideVerify);

2.3、放置容器

    <!-- 图片验证区域 -->      <slide-verify        v-if="showSlideBar"        class="xa-slideBar"        ref="slideblock"        @again="onAgain"        @fulfilled="onFulfilled"        @success="onSuccess"        @fail="onFail"        @refresh="onRefresh"        :accuracy="accuracy"        :slider-text="slideBarText"      ></slide-verify>

2.4、配置属性和方法

  属性：  data() {    return {      userNo: "",      userPwd: "",      showSlideBar: true,      /* 滑块文字提示 */      slideBarText: "按住滑块，拖动完成上面拼图",      /* 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5 */      accuracy: 1,    };  },方法：    onSuccess(times) {      /* 验证通过，时间单位毫秒 */          },    onFail() {      /* 验证失败 */    },    onRefresh() {      /* 点击刷新回调函数 */    },    onFulfilled() {      /* 刷新成功回调函数 */    },    onAgain() {      this.msg = "try again";      /* 刷新 */      this.$refs.slideblock.reset();    },    handleClick() {      /* 父组件直接可以调用刷新方法 */      this.$refs.slideblock.reset();    },

2.5、相关配置说明

三、效果展示