@yangxc/image-verify-code
图片滑动验证码
npm仓库地址 : https://www.npmjs.com/package/@yangxc/image-verify-code
咋装下呢?
npm i @yangxc/image-verify-code
或者使用 yarn add @yangxc/image-verify-code
看下到底是个啥
预览图
用起来！兄弟萌！
使用咋装下呢?中的命令将该插件安装到你的项目之后，就可以在main.js中使用import引入，然后使用Vue.use(XXX)使用即可。
import ImageVerifyCode from '@yangxc/image-verify-code'
Vue.use(ImageVerifyCode)
参数都有啥
| 参数名儿 | 含义 | 类型 | 默认值 |
|---|---|---|---|
| image-width | 大图宽度(分辨率宽度) | Number | 300 |
| big-img-src | 大图地址(base64 or XXX.xxx) | String | 默认大图示例地址 |
| small-img-src | 小图地址(base64 or XXX.xxx) | String | 默认小图示例地址 |
| small-img-top | 小图距离顶部高度 | Number | 160 |
| back-speed | 滑块返回速度(每毫秒移动的px值) | Number | 2 |
方法都有啥
| 方法名儿 | 含义 |
|---|---|
| init | 初始化方法(声明变量、绑定鼠标事件) |
| removeListener | 解绑鼠标监听事件 |
事件都有啥
| 事件名儿 | 含义 | 入参 |
|---|---|---|
| start | 滑块开始滑动(鼠标摁下) | - |
| move | 滑块滑动(鼠标摁下 && 滑动) | {clientX:X轴当前值,moveSub:移动距离} |
| done | 滑块滑动结束(鼠标松开) | 滑块移动距离(px) |
写在最后的话
这是自己编写的第一个组件，肯定有很多不足之处，如果你使用并且发现到啦，烦请联系我，我们一起修复掉它！下面是我的联系方式:
- Email：xicunyang@163.com
预览图.bak
预览图
网友评论