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>