文章目录
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);
- 页面中使用(封装,直接可以拿去用)
<template>
<div>
<p>安全验证</p>
<a-card>
<div class="page-slidecode">
<!-- l:滑块的边长
r:滑块突出圆的半径
w:canvas画布的宽
h:canvas画布的高
imgs:背景图数组
sliderText:滑块底纹文字
accuracy:滑动验证的误差范围,默认值为5
show:是否显示刷新按钮
success:验证码匹配成功的回调
fail:验证码未匹配的回调
refresh:点击刷新按钮后的回调函数
fulfilled:刷新成功之后的回调函数
-->
<slide-verify
:l="42"
:r="10"
:w="310"
:h="155"
:imgs="bgimgs"
@success="onSuccess"
@fail="onFail"
@refresh="onRefresh"
ref="slideblock"
:slider-text="text"
></slide-verify>
</div>
</a-card>
<div class="yz-msg">{{ msg }}</div>
</div>
</template>
<script>
// import aa from "../../imgs/###.png"; // 如果使用网络图片资源就无需引入
// import bb from "../../imgs/###.png"; // 如果使用网络图片资源就无需引入
// import cc from "../../imgs/###.png"; // 如果使用网络图片资源就无需引入
import imgList from "../../imgs//index.js";//单独封装一个图片存储文件
export default {
data() {
return {
msg: "",
bgimgs: imgList,
// bgimgs:[], // 如果使用网络图片资源就用该值
text: "向右滑动~",
state: false,
};
},
export default {
name: 'App',
data(){
return {
msg: '',
text: '向右滑',
// 精确度小,可允许的误差范围小;为1时,则表示滑块要与凹槽完全重叠,才能验证成功。默认值为5
accuracy: 1,
}
},
methods: {
onSuccess(times){
console.log('验证通过,耗时 +' times + '毫秒');
this.msg = 'login success, 耗时${(times / 1000).toFixed(1)}s'
},
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();
},
}
}