Skip to content

shinchanZ/vue-jigsaw-verification

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
zhudongdong
Mar 18, 2020
a96721b · Mar 18, 2020

History

13 Commits
Mar 18, 2020
Mar 18, 2020
Mar 18, 2020
Mar 18, 2020
Mar 18, 2020
Jan 9, 2020
Jan 9, 2020
Mar 18, 2020
Mar 18, 2020
Jan 9, 2020
Jan 9, 2020
Mar 18, 2020
Jan 9, 2020

Repository files navigation

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('失败')}