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) | ||
small-img-top | 小图距离顶部高度 | Number | 160 |
back-speed | 滑块返回速度(每毫秒移动的px值) | Number | 2 |
方法都有啥
方法名儿 | 含义 |
---|---|
init | 初始化方法(声明变量、绑定鼠标事件) |
removeListener | 解绑鼠标监听事件 |
事件都有啥
事件名儿 | 含义 | 入参 |
---|---|---|
start | 滑块开始滑动(鼠标摁下) | - |
move | 滑块滑动(鼠标摁下 && 滑动) | {clientX:X轴当前值,moveSub:移动距离} |
done | 滑块滑动结束(鼠标松开) | 滑块移动距离(px) |
写在最后的话
这是自己编写的第一个组件,肯定有很多不足之处,如果你使用并且发现到啦,烦请联系我,我们一起修复掉它!下面是我的联系方式:
- Email:xicunyang@163.com