@wines/vcode

Vcode 验证码

用于展现验证码。

使用指南

$3

``json
{
"navigationBarTitleText": "wux-vcode",
"usingComponents": {
"wux-vcode": "@wines/vcode"
}
}
`

$3

`xml


Vcode
验证码












id="wux-vcode"
str="1234567890"
bgColor="#e6f6ff"
fontColor="#165189"
hasPoint
hasLine
bind:change="onChange"
/>




Refresh Vcode




`

`ts
import './index.less';
import { $wuxVcode } from '@wines/vcode';

Page({
data: {},
onLoad() {
/* /
},
onChange(e) {
console.log(验证码：${e.detail.value as string});
},
onClick() {
const vcode = $wuxVcode('#wux-vcode');
if (vcode) {
vcode.draw();
}
},
});
`

API

$3

| 参数 | 类型 | 描述 | 默认值 |
| ----------- | ---------- | ------------------ | -------------------------------------------------------------- |
| str | string | 验证码范围 | ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 |
| num | number | 验证码长度 | 6 |
| width | number | 画布宽度 | 120 |
| height | number | 画布高度 | 40 |
| bgColor | string | 画布背景色 | - |
| fontColor | string | 画布字体颜色 | - |
| hasPoint | boolean | 是否显示干扰点 | true |
| hasLine | boolean | 是否显示干扰线 | true |
| bind:change | function` | 点击事件的回调函数 | - |