npm i vue-puzzle-verification安裝使用- 在main.js中引入
import PuzzleVerification from 'vue-puzzle-verification' Vue.use(PuzzleVerification) （我是在組件中引入的）
<template>
<div class="container">
<div class="login-box">
<button @click="handleClick(1)">最簡單用法</button>
<div class="puzzle-box">
<PuzzleVerification
v-model="isVerificationShow1"
:onSuccess="handleSuccess"
/>
</div>
</div>
<div class="login-box">
<button @click="handleClick(2)">拼圖形滑塊</button>
<div class="puzzle-box">
<PuzzleVerification
v-model="isVerificationShow2"
:puzzleImgList="puzzleImgList"
blockType="puzzle"
:onSuccess="handleSuccess"
/>
</div>
</div>
<div class="login-box">
<button @click="handleClick(3)">控制大小</button>
<div class="puzzle-box">
<PuzzleVerification
v-model="isVerificationShow3"
width="300"
height="200"
blockSize="80"
blockRadius="5"
:onSuccess="handleSuccess"
/>
</div>
</div>
<div class="login-box">
<button @click="handleClick(4)">控制誤差</button>
<div class="puzzle-box">
<PuzzleVerification
v-model="isVerificationShow4"
:puzzleImgList="puzzleImgList"
deviation="20"
blockType="puzzle"
:onSuccess="handleSuccess"
/>
</div>
</div>
<div class="login-box">
<button @click="handleClick(5)">控制滑塊出現位置范圍</button>
<div class="puzzle-box">
<PuzzleVerification
v-model="isVerificationShow5"
wraperPadding="50"
:onSuccess="handleSuccess"
/>
</div>
</div>
</div>
</template>
<script>
import "../components/helloworld.scss"
import PuzzleVerification from "vue-puzzle-verification"
export default {
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) {
case 1:
this.isVerificationShow1 = true;
break;
case 2:
this.isVerificationShow2 = true;
break;
case 3:
this.isVerificationShow3 = true;
break;
case 4:
this.isVerificationShow4 = true;
break;
default:
this.isVerificationShow5 = true;
}
}
}
}
</script>
<style lang="scss" scoped>
.container {
padding-top: 100px;
position: relative;
display: flex;
flex-flow: row wrap;
.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: 1px solid #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: 12px 20px;
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 | --- | 打印失敗信息 | 拼接失敗時的回調 |
下方效果圖
