@yangxc/image-verify-code

1.1.0 • Public • Published

image-verify-code

图片滑动验证码


咋装下呢?

npm i @yangxc/image-verify-code 或者使用 yarn add @yangxc/image-verify-code

看下到底是个啥

Image

用起来!兄弟萌!

使用咋装下呢?中的命令将该插件安装到你的项目之后,就可以在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)

写在最后的话

这是自己编写的第一个组件,肯定有很多不足之处,如果你使用并且发现到啦,烦请联系我,我们一起修复掉它!下面是我的联系方式:

Package Sidebar

Install

npm i @yangxc/image-verify-code

Weekly Downloads

0

Version

1.1.0

License

MIT

Unpacked Size

137 kB

Total Files

3

Last publish

Collaborators

  • yxc945ya