Vue-jigsaw-verification NPM

vue-jigsaw-verification

安装

cnpm i vue-jigsaw-verification -S
//npm i vue-jigsaw-verification -S

配置

//main.js
import vueJigsawVerfication from 'vue-jigsaw-verification'
Vue.use(vueJigsawVerfication)

Compiles and minifies for production

   <vue-jigsaw-verification
                :verificationShow.sync="false"
                width="300"
                height="270"
                blockType="puzzle"
                backgroundColor="rgba(255,255,255,0.5)"
                :onSuccess="handleSuccess">
            <span slot="title">请完成安全验证</span>
            <span slot="success"> 验证通过</span>
            <span slot="error"> 验证失败，请重新进行验证</span>
   </vue-jigsaw-verification>

属性

属性	描述	默认值
width	图片的宽	300
height	图片的高	240
puzzleImgList	图集，数组格式	'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=288526321,3228035290&fm=15&gp=0.jpg',require('../asset/1.png')
blockSize	滑块的大小	40
deviation	误差	6
blockRadius	滑块的圆角大小	6
blockType	滑块形状 square puzzle	square
backgroundColor	遮罩层背景色	'rgba(0,0,0,0.3)'
onSuccess	成功的回调函数	default: () => {console.log('成功') }
onError	失败的回调函数	default: () => {console.log('失败')}