mr-vue-puzzle v1.0.2

mr-vue-puzzle

基于公司需求扩展 vue-puzzle-verification原作者路径

新增参数 forbid title及交互优化

使用：

npm i mr-vue-puzzle

局部引用：

import PuzzleVerification from 'vue-puzzle-verification'

效果展示

1. 简单用法:

<div class="login-box">
  <button @click="handleClick(1)">最简单用法</button>
  <div class="puzzle-box">
    <PuzzleVerification
      v-model="isVerificationShow1"
      :onSuccess="handleSuccess"
    />
  </div>
</div>

2. 拼图形滑块:

<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>

3. 控制大小:

<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>

4. 控制误差:

<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>

5. 滑块出现的范围:

<div class="login-box">
  <button @click="handleClick(5)">控制滑块出现位置范围</button>
  <div class="puzzle-box">
    <PuzzleVerification
      v-model="isVerificationShow5"
      wraperPadding="50"
      :onSuccess="handleSuccess"
    />
  </div>
</div>

参数说明