1.5.1 • Published 1 year ago
@wines/vcode v1.5.1
@wines/vcode
Vcode 验证码
用于展现验证码。
使用指南
在 page.json 中引入组件
{
"navigationBarTitleText": "wux-vcode",
"usingComponents": {
"wux-vcode": "@wines/vcode",
}
}
示例
<view class="page">
<view class="page__hd">
<view class="page__title">Vcode</view>
<view class="page__desc">验证码</view>
</view>
<view class="page__bd">
<wux-cell-group title="Default">
<wux-cell hover-class="none">
<wux-input label="Vcode" placeholder="Please input vcode" />
<view slot="footer" class="vcode">
<wux-vcode bind:change="onChange" />
</view>
</wux-cell>
<wux-cell hover-class="none">
<wux-input label="Vcode" placeholder="Please input vcode" />
<view slot="footer" class="vcode">
<wux-vcode
id="wux-vcode"
str="1234567890"
bgColor="#e6f6ff"
fontColor="#165189"
hasPoint
hasLine
bind:change="onChange"
/>
</view>
</wux-cell>
</wux-cell-group>
<view class="button-sp-area">
<wux-button block type="light" bind:click="onClick">Refresh Vcode</wux-button>
</view>
</view>
</view>
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
Vcode props
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
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 | 点击事件的回调函数 | - |