1 // 先获取lib文件夹，在博客园里的文件里：https://i.cnblogs.com/files
2
3 // 然后在main.js中引入
4
5 import SlideVerify from './lib/index'
6
7 //Vue.config.productionTip = false
8
9 Vue.use(SlideVerify)
10
11 //最后在要使用的组件中引入即可
12 <slide-verify ref="slideblock" @success="onSuccess" @again="onAgain" @fulfilled="onFulfilled" @fail="onFail" @refresh="onRefresh" :slider-text="text" :imgs="imgs" :accuracy="accuracy"></slide-verify>
13
14
15 // script内容
16 <script>
17 import img0 from './assets/img.jpg';
18 import img1 from './assets/img1.jpg';
19 import img2 from './assets/img2.jpg';
20 import img3 from './assets/img3.jpg';
21 import img4 from './assets/img4.jpg';
22 import img5 from './assets/img5.jpg';
23 export default {
24 name: 'App',
25 data(){
26 return {
27 msg: '',
28 text: '向右滑动->',
29 imgs: [
30 img0,
31 img1,
32 img2,
33 img3,
34 img4,
35 img5,
36 ],
37 accuracy: 1, // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
38 }
39 },
40 methods: {
41 onSuccess(times){
42 console.log('验证通过');
43 this.msg = `login success, 耗时${(times / 1000).toFixed(1)}s`;
44 },
45 onFail(){
46 console.log('验证不通过');
47 this.msg = ''
48 },
49 onRefresh(){
50 console.log('点击了刷新小图标');
51 this.msg = ''
52 },
53 onFulfilled() {
54 console.log('刷新成功啦！');
55 },
56 onAgain() {
57 console.log('检测到非人为操作的哦！');
58 this.msg = 'try again';
59 // 刷新
60 this.handleClick();
61 },
62 handleClick() {
63 this.$refs.slideblock.reset();
64 this.msg = ''
65 },
66 }
67 }
68 </script>
