VCode 验证码

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2.   "w-vcode": "wuss-weapp/w-vcode/index",
  3. }

图片演示

VCode 验证码 - 图1

代码演示

  1. w-cell-group>
  2. <w-cell-group>
  3.   <w-vcode
  4.     label="验证码"
  5.     placeholder="验证码..."
  6.     vcodeSrc="{{ src }}"
  7.     bind:onChangeVCode="handleChange"
  8.   />
  9. </w-cell-group>
  1. data: {
  2.   src: 'https://ws1.sinaimg.cn/large/663d3650gy1fq684go3glj203m01hmwy.jpg',
  3.   flag: false,
  4. },
  5. handleChange() {
  6.   this.setData({
  7.     src: this.data.flag ? 'http://img5.imgtn.bdimg.com/it/u=3224070611,1493841838&fm=26&gp=0.jpg' : 'https://ws1.sinaimg.cn/large/663d3650gy1fq684go3glj203m01hmwy.jpg',
  8.     flag: !this.data.flag,
  9.   })
  10. },

API

Attribute 属性

属性说明类型默认值
options标签String-
defaultValue值String-
cancelTextColor占位符String-
cancelText禁用Booleanfalse
title验证码图片地址String-
confirmTextColor最大长度Number-

Event 事件

事件名说明参数
onChange值改变时触发e.detail.value
onChangeVCode验证码图片被点击时触发-

Slot 插槽

名称说明
slot指定的图片验证码

Class 自定义类名

类名说明
wuss-class根节点样式类
wuss-placeholder-class验证码输入框的placeholder样式