vue-monoplasty-slide-verify 滑动验证码插件使用及踩坑

一、效果图

二、安装依赖

npm install --save vue-monoplasty-slide-verify
或
yarn add vue-monoplasty-slide-verify

三、引入插件

 坑一：需要在main.js引入，在使用插件的 .vue组件文件中使用按需引入的方式引入，会报错。

//main.js 引入vue-monoplasty-slide-verify代码
import Vue from 'vue'
import SlideVerify from 'vue-monoplasty-slide-verify'
Vue.use(SlideVerify);

 四、.vue组件文件中使用（坑2）

//使用了elementUI的el-dialog组件弹出显示
<template>
    <div>
        <!-- 使用登录验证来做入口示例 -->
        <el-button type="primary" size="small" @click="loginOper">登录</el-button>
        <el-dialog :visible.sync="slideVerify.show" title="向右滑动通过验证" width="358px" :close-on-click-modal="false" :close-on-press-escape="false">
            <slide-verify
              ref="slideVerify"
              :l="42"
              :r="10"
              :w="310"
              :h="155"
              :imgs="slideVerify.imgs" //插件背景图片，必须要赋值，不然会显示不全且一直报错
              slider-text="向右滑动"
              @success="verifySuccess" //通过验证回调
              @fail="verifyFail"> //未通过验证回调
            </slide-verify>
          </el-dialog>
    </div>
</template>
<script>
export default {
    data () {
        return {
            slideVerify: {
                show: false,
                imgs: [require('@/assets/img/home/mask2@2x.png')] //我只用了一张图片，可以多引入几张图片，会随机切换插件背景图片（下面会附出图片路径，演示图片路径写法）
            }
        }
    },
    methods: {
        loginOper () {
            this.slideVerify.show = true;
            this.$nextTick(() => {
                this.$refs.slideVerify.reset(); //弹出验证弹窗后，手动刷新验证码
            });
        },
        verifySuccess () {
            this.slideVerify.show = false;
            // ...通过验证后的操作的操作
        },
        verifyFail () {
            this.$message.error('请拖动滑块至拼图区域。'); //未通过验证会自动刷新验证码，不需要手动刷新
        }
    }
}
</script>

插件背景引用图片路径图

 

五、vue-monoplasty-slide-verify 文档地址

vue-monoplasty-slide-verify · 前端插件技术文档 · 看云

我的引用实例，也未展示插件全部参数与事件回调，所以附上文档地址。