1.0.2 • Published 1 year ago
zpm-verification v1.0.2
这是一款随机生成点选文字验证的VUE组件，和普通的点选文字区别在于： 文字是移动的，可设置运行速度，可倒计时刷新，可设置是否自动验证（点击总数达到后自动校验），可根据客户给出的背景随机展示，可设置剩余多少秒时开始震动，并且要按照顺序和个数依次次点选，通过验证后方可执行下一步
Props:
| 属性 | 属性说明 | 属性类型 | 默认值 |
|---|---|---|---|
| id | 验证区域容器id | String | wrap_当前时间戳 |
| boxStyle | 容器自定义样式 | Object | {"border-radius":"8px"} |
| width | 容器宽度 | String | 100% |
| height | 容器高度 | String | 250px |
| activity | 是否运动 | Boolean | true |
| crashing | 文字是否可互相碰撞 | Boolean | false |
| clickAll | 是否全部需要点选 | Boolean | true |
| showCountDown | 是否开启倒计时多少秒后自动刷新文字验证码 | Boolean | false |
| countDownStyle | 自定义倒计时文字描述样式 | Object | {'color': '#666', 'font-size':'14px', 'letter-spacing': '2px','text-align':'right'} |
| countDownTime | 开启倒计时后，多少秒后自动刷新验证码 默认值30秒,可以是固定数值秒数，也可以是数字区间内的随机秒数，例如：[15,30],即在15到30秒内随机倒计时数 | [Number,Array] | 30 |
| applyShakeTime | 倒计时多少秒后震动 | Number | 5 |
| speed | 运动速度 | Number | 0.2 |
| background | 背景颜色或图片路径，随机展示哦用户给出的图片或者展示客户给出的随机颜色（随机渐变） | Array | 无 |
| fonts | 字体 | Array | ["华文行楷", "华文彩云", "Muyao-Softbrush", "KaiTi", "FangSong_GB2312", "SimSun", "SimHei", "Microsoft JhengHei", "Microsoft YaHei", "PMingLiU", "YouYuan", "STCaiyun", "FZYaoti"] |
| defaultDesc | 是否启用默认描述文字，true时自带描述文字，和按钮校验 | Boolean | true |
| validRealTime | 是否实时校验（即点击够了次数之后自动校验） | Boolean | true |
| validBtnStyle | 内置校验按钮的样式 | Object | |
| validBtnText | 内置校验按钮的文字 | String | 验证 |
Event:
initInfo：初始化返回需要点击的文字（text）以及个数(num)和校验方法validFun,在不使用内置点选描述和自动校验时，可手动拼接点选文字描述信息以及手动点击按钮配置调用validFun方法 例如： {strings:[{next:'章'，num:2},{next:'叁'，num:1}],validFun(){}}
result：返回验证结果，并自动提示
使用方法：
1.npm install zpm-verification
2.在vue项目中的main.js中加入一下代码
import Verification from 'zpm-verification'
Vue.use(Verification)
import 'zpm-verification/Verification.css'
