APICloud|APICloud AVM 封装验证码输入框组件 APICloudAVM封装验证码输入框组件

AVM（Application-View-Model）前端组件化开发模式基于标准Web Components组件化思想，提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具，完全兼容Web Components标准，同时兼容Vue和React语法糖编写代码，编译工具将Vue和React相关语法糖编译转换为avm.js代码。
基于标准 Web Components 组件化思想，兼容 Vue / React 语法特性，通过一次编码，分别编译为 App、小程序代码，实现多端开发。
组件功能介绍
验证码输入框组件，可自定义下次点击等待时长，自定义验证码长度，可根据自定义的验证码长度进行输入内容的验证。
组件示例

文章图片

组件开发
组件文件
verification-code-input.stml

.verification-code{ flex-flow: row nowrap; margin: 10px 20px; justify-content: space-between; border-bottom: 0.5px solid #f0f0f0; align-items: center; } .code-input{ width: auto; border: none; font-size: 18px; } .code-btn{ color: #1492ff; font-size: 18px; }

组件使用说明
本组件是基于AVM.js开发的多端组件，通常同时适配Android、iOS、小程序、H5 , 具体支持情况还要看每个组件的说明文档。
【APICloud|APICloud AVM 封装验证码输入框组件】首先需要登录开发平台，http://www.apicloud.com。通过控制平台右上方的模块Store进入，然后选择AVM组件。

文章图片

文章图片

找到对应模块进入

文章图片

也可通过搜索栏，通过组件名称关键字进行检索。
进入模块详情，点击立即下载下载完整的组件安装包。

文章图片

组件压缩包的文件目录如下

文章图片

也可通过查看模块文档来了解模块的具体参数，引用的原生模块，注意事项等

文章图片

具体在项目中的使用步骤是，第一步将压缩文件中的verification-code-input.stml文件拷贝到项目的components目录，通过阅读readme.md 文档和查看demo示例文件 demo-verification-code-input.stml在需要开发的stml文件中，引入组件文件，完成页面的开发。
demo-verification-code-input.stml

.page { height: 100%; background-color: #ffffff; padding-top: 100px; } .verification-code{ flex-flow: row nowrap; margin: 10px 20px; justify-content: space-between; border-bottom: 0.5px solid #f0f0f0; align-items: center; } .code-input{ width: auto; border: none; font-size: 15px; flex: 1; } .code-btn{ color: #1492ff; font-size: 15px; }

如果在AVM组件库中，没有找到实际项目中需要的组件，可以自己尝试封装组件。
这是组件化开发的在线文档地址