一、背景

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

二、整合流程

2.1、选型

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

https://gitee.com/monoplasty/vue-monoplasty-slide-verify

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、相关配置说明

三、效果展示