@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 | 点击事件的回调函数 | - |