angular 拼图式拖动验证组件 ng-jigsaw

• 一些网站总会有各式的验证操作，比如经常见到的输入验证码、拖动验证、手机信息验证、拼图式的验证方式。在这里，给大家推荐一个比较简单好用的angular项目使用的拼图式的验证组件ng-jigsaw.

安装

npm i ng-jigsaw --save

引用

在angular.json中引入基本样式：

  ...
  "styles": [
      "node_modules/ng-jigsaw/ng-jigsaw.css"
  ],
  ...

在 app.component.ts中引入NgJigsawModule

import { NgJigsawModule } from 'ng-jigsaw';
...
imports:[
    ...
    NgJigsawModule,
]

使用

普通使用

<ng-jigsaw mode='default'></ng-jigsaw>

显示图片控制

使用者可根据需求替换验证的背景图片

html:

<ng-jigsaw mode='default' (successBack)="success()" (refreshB