1.0.0 • Published 2 years ago
vue-prevention-robot v1.0.0
vue-prevention-robot
安装
npm install -S vue-prevention-robot引入
const vuePreventionRobot = require("vue-prevention-robot")
Vue.use(vuePreventionRobot)使用
<prevention-robot v-model="isVerificationShow1" :puzzleImgList="puzzleImgList" :onSuccess="handleSuccess" />
<script>
export default {
data(){
return {
puzzleImgList: [
require("@/assets/thumbnail-img01.jpg"),
require("@/assets/thumbnail-img02.jpg"),
require("@/assets/thumbnail-img03.jpg")
]
}
}
}
</script>参数配置
| 参数名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| verificationShow | 展示 | Boolean | true， false | false |
| width | 图片宽度 | String，Number | — | 260 |
| height | 图片高度 | String，Number | — | 120 |
| puzzleImgList | 图片集合 | Array | — | 默认图片 |
| blockSize | 滑块大小 | String，Number | — | 40 |
| blockRadius | 滑块圆角大小，blockType为square时有效 | String，Number | — | 4 |
| deviation | 滑块误差判断 | String，Number | — | 4 |
| wraperPadding | 滑块能出现的范围（距离右边的距离） | String，Number | — | 20 |
| blockType | 方块类型 | String | square， puzzle | square |
| onSuccess | 成功回调函数 | Function | — | — |
| onError | 失败回调函数 | Function | — | — |
注意：puzzleImgList的图片列表 宽高最好统一，至少宽高比例一致，然后配置 width及 height。 防止图片变形。