Apex

# 验证码 vcode

# 描述

用于生成验证码

# 使用效果

vcode

# 使用方法

在.ux文件中引入组件

<import name="my-vcode" src="apex-ui/components/vcode/index"></import>
1

# 示例

<template>
    <div>
        <div class="wrap">
            <div class="row">
                <my-input title="验证码" value="{{content}}" placeholder="请输入验证码" onchange="changeHandler()"></my-input>
                <my-vcode onchange="changeHandler()"></my-vcode>
            </div>
            <div class="row">
                <my-input title="验证码" value="{{content}}" placeholder="请输入验证码" onchange="changeHandler()"></my-input>
                <my-vcode onchange="changeHandler()"></my-vcode>
            </div>
            <text>tips:点击验证码可刷新</text>
        </div>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.wrap {
    padding: 20px;
    flex-direction: column;

    .row {
        padding: 20px 0;
    }

    text {
        padding: 20px;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

# API

# 组件属性

属性 类型 默认值 说明
str String 英文字母大小写及数字 验证码范围
num Number 6 验证码长度
width Number 240 画布宽度
height Number 80 画布高度
bgColor String - 画布背景色
fontColor String - 画布字体颜色
hasPoint Boolean true 是否显示干扰点
hasLine Boolean true 是否显示干扰线
id String 'canvasId' canvas id,使用华为引擎时必传

# 组件事件

事件名称 事件描述 返回值
change 验证码改变后的触发的事件 {value:value}

← 数字键盘 keyboard →