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：[email protected]