angular 拼图式拖动验证组件 ng-jigsaw
-
一些网站总会有各式的验证操作，比如经常见到的输入验证码、拖动验证、手机信息验证、拼图式的验证方式。在这里，给大家推荐一个比较简单好用的angular项目使用的拼图式的验证组件.
安装
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()" (refreshBack)="refresh($event)"></ng-jigsaw>
ts:
refresh(e){
e.src = "https://picsum.photos/300/150/?image=60"
}
