一、效果图
二、安装依赖
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 · 前端插件技术文档 · 看云
我的引用实例,也未展示插件全部参数与事件回调,所以附上文档地址。