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>