• npm i vue-puzzle-verification 安裝使用
• 在main.js中引入

import PuzzleVerification from 'vue-puzzle-verification'
Vue.use(PuzzleVerification)  （我是在元件中引入的）

<template> <divclass="container"> <divclass="login-box"> <button@click="handleClick(1)">最簡單用法</button> <divclass="puzzle-box"> <PuzzleVerification v-model="isVerificationShow1" :onSuccess="handleSuccess" /> </div> </div>
<divclass="login-box"> <button@click="handleClick(2)">拼圖形滑塊</button> <divclass="puzzle-box"> <PuzzleVerification v-model="isVerificationShow2" :puzzleImgList="puzzleImgList" blockType="puzzle" :onSuccess="handleSuccess" /> </div> </div>
<divclass="login-box"> <button@click="handleClick(3)">控制大小</button> <divclass="puzzle-box"> <PuzzleVerification v-model="isVerificationShow3" width="300" height="200" blockSize="80" blockRadius="5" :onSuccess="handleSuccess" /> </div> </div>
<divclass="login-box"> <button@click="handleClick(4)">控制誤差</button> <divclass="puzzle-box"> <PuzzleVerification v-model="isVerificationShow4" :puzzleImgList="puzzleImgList" deviation="20" blockType="puzzle" :onSuccess="handleSuccess" /> </div> </div>
<divclass="login-box"> <button@click="handleClick(5)">控制滑塊出現位置範圍</button> <divclass="puzzle-box"> <PuzzleVerification v-model="isVerificationShow5" wraperPadding="50" :onSuccess="handleSuccess" /> </div> </div> </div> </template>
<script> import"../components/helloworld.scss" importPuzzleVerificationfrom"vue-puzzle-verification" exportdefault{ name:'demo', components:{ PuzzleVerification }, data(){ return{ isVerificationShow1:false, isVerificationShow2:false, isVerificationShow3:false, isVerificationShow4:false, isVerificationShow5:false, puzzleImgList:[ require("../assets/thumbnail-img01.jpg"), require("../assets/thumbnail-img02.jpg"), require("../assets/thumbnail-img03.jpg") ] }; }, watch:{ isVerificationShow(val){ } }, mounted(){ }, computed:{ }, methods:{ handleSuccess(){ console.log('驗證成功了') }, handleClick(n){ switch(n){ case1: this.isVerificationShow1=true; break; case2: this.isVerificationShow2=true; break; case3: this.isVerificationShow3=true; break; case4: this.isVerificationShow4=true; break; default: this.isVerificationShow5=true; } } } } </script> <stylelang="scss"scoped> .container{ padding-top:100px; position:relative; display:flex; flex-flow:rowwrap; .login-box{ width:400px; height:300px; } .puzzle-box{ position:absolute; //bottom:0; //left:0; } button{ color:#fff; background-color:#50AAD0; border-color:#50AAD0; display:inline-block; line-height:1; white-space:nowrap; cursor:pointer; background:#fff; border:1pxsolid#dcdfe6; color:#606266; -webkit-appearance:none; text-align:center; -webkit-box-sizing:border-box; box-sizing:border-box; outline:0; margin:0; -webkit-transition:.1s; transition:.1s; font-weight:500; padding:12px20px; font-size:14px; border-radius:4px; &:hover{ border-color:#50AAD0; } } } </style>

引數說明

引數	是否必需	型別	可選值	預設值	說明
v-model	是	---	---	---	繫結顯示與隱藏
blockType	否	string	square, puzzle	puzzle	滑塊的形狀
blockSize	否	string, number	0 ~	40	滑塊的大小（正方形），不能大於畫布尺寸
width	否	string, number	0 ~	260	畫布圖片的寬度
height	否	string, number	0 ~	120	畫布圖片的高度
puzzleImgList	否	array	---	三張引用圖片	傳入的圖片
blockRadius	否	string, number	0 ~	4	滑塊圓角的大小（僅當其形狀是square有效）
deviation	否	string, number	0 ~	4	滑塊吻合的誤差
wraperPadding	否	string, number	0 ~	20	滑塊隨機出現的範圍，數字越大，範圍越大（不能大於畫布尺寸）
onSuccess	是	function	---	列印成功資訊	拼接成功時的回撥
onError	否	function	---	列印失敗資訊	拼接失敗時的回撥

下方效果圖