Vcode 验证码

用于展现验证码。

使用指南

在 page.json 中引入组件

{
    "navigationBarTitleText": "Vcode",
    "usingComponents": {
        "wux-vcode": "../../dist/vcode/index"
    }
}

示例

<view class="page">
    <view class="page__hd">
        <view class="page__title">Vcode</view>
        <view class="page__desc">验证码</view>
    </view>
    <view class="page__bd">
        <view class="weui-cells__title">默认 & 自定义</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_input weui-cell_vcode">
                <view class="weui-cell__hd">
                    <view class="weui-label">验证码</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input" placeholder="请输入验证码" />
                </view>
                <view class="weui-cell__ft" style="text-align: left">
                    <wux-vcode bind:change="onChange" />
                </view>
            </view>
            <view class="weui-cell weui-cell_input weui-cell_vcode">
                <view class="weui-cell__hd">
                    <view class="weui-label">验证码</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input" placeholder="请输入验证码" />
                </view>
                <view class="weui-cell__ft" style="text-align: left">
                    <wux-vcode canvas-id="custom-canvas" bg-color="#e6f6ff" font-color="#165189" has-point="{{ false }}" has-line="{{ false }}" bind:change="onChange" />
                </view>
            </view>
        </view>
    </view>
</view>

Page({
    data: {},
    onLoad() {},
    onChange(e) {
        console.log(`验证码：${e.detail.value}`)
    },
})

视频演示

Vcode

API

Vcode props