zyz-slider-verify

1.0.4 • Public • Published

zyz-slider-verify

canvas实现图片验证码

demo

安装

    npm install zyz-slider-verify
    // or
    yarn add zyz-slider-verify

使用

    import { ZyzSliderVerify } from "zyz-slider-verify";

    // 在dom渲染完成后执行
    const verify = new ZyzSliderVerify(ele, img);

    // 同时组件卸载要调用清除事件、资源等
    verify.destroy();
   

这里以React为例:

function Demo() {
  useEffect(() => {
    const ele = document.querySelector('#container');
    if(ele) {
      const verify = new ZyzSliderVerify(ele, img);
      return () => verify.destroy();
    }
  })
  return (
    <div id="container">
    </div>
  );
}

export default Demo;

配置

ZyzSliderVerify(ele, img, option)

  • ele - 挂载节点,可以是id、class或者是dom节点。
  • img - 图片src,使用该图片作为验证码背景。
  • option
    • width - 图片宽度,默认400
    • height - 图片高度,默认300
    • refresh - 刷新函数,默认空函数
    • onSuccess - 滑动校验成功后的回调函数,默认空函数
    • onFail - 滑动校验失败后的回调函数,默认空函数

Package Sidebar

Install

npm i zyz-slider-verify

Weekly Downloads

2

Version

1.0.4

License

MIT

Unpacked Size

22 kB

Total Files

10

Last publish

Collaborators

  • t867203437