# VerificationCodeButton

**Repository Path**: passerby-ss/VerificationCodeButton

## Basic Information

- **Project Name**: VerificationCodeButton
- **Description**: 发送短信验证码的按钮
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2021-08-09
- **Last Updated**: 2023-03-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VerificationCodeButton

#### 介绍
仿获取短信验证码按钮，在规定事件内禁用按钮

项目名称：Verification

功能：一个简单的获取短信验证码的按钮，在规定时间内禁用按钮

开发版本：sdk6，DevEco Studio 2.2 Beta1


#### 项目介绍

- 编程语言：JS

- 本项目为一个基础组件，没有单独封装调用，使用时需要把代码复制到所需要使用的位置即可。

- 该组件可以实现获取验证码按钮的基本交互，在众多APP中也有使用。目前虽然还没将它与输入框组合使用，但是核心功能已经开发完成。


#### 项目架构
项目架构说明

项目架构如下图所示：

![项目架构](https://images.gitee.com/uploads/images/2021/0810/085059_c0fc0ceb_8256951.png "屏幕截图.png")

此项目的主要代码文件集中在 page 目录下 ，verificationCodeButton1~4 分别为不同样式的获取验证码按钮，index 为4种不同的样式按钮的整合，通过运行模拟器或者再预览界面中都可以看到效果。

#### 效果演示
（为了演示方便，增加了整体的尺寸，动图画质受损）

![初始状态](https://images.gitee.com/uploads/images/2021/0810/113827_01a002e4_8256951.png "1.png")

![等待过程](https://images.gitee.com/uploads/images/2021/0810/113944_a7bbdb9d_8256951.png "3.png")


![等待中](https://images.gitee.com/uploads/images/2021/0810/114455_02dd110e_8256951.gif "2.gif")


![等待结束](https://images.gitee.com/uploads/images/2021/0810/115917_c8cdeac0_8256951.gif "3.gif")


#### 安装教程

1.  直接下载仓库代码，或者只下载想要使用的按钮代码（如：verficationCodeButton1文件）

#### 使用说明

1.  将想要使用的按钮的文件放在 default/common 中（如果没有common 目录可以自己新建），如下图所示：

![自定义组件存放位置](https://images.gitee.com/uploads/images/2021/0810/090039_f9a0c77f_8256951.png "屏幕截图.png")

2.  然后可以使用 element 引用到宿主界面，如在 index.hml 界面中使用四个自定义组件：

```
<element src="../../common/verificationCodeButton1/verificationCodeButton1.hml" name="vcb1" ></element>
<element src="../../common/verificationCodeButton2/verificationCodeButton2.hml" name="vcb2"></element>
<element src="../../common/verificationCodeButton3/verificationCodeButton3.hml" name="vcb3"></element>
<element src="../../common/verificationCodeButton4/verificationCodeButton4.hml" name="vcb4" ></element>
<div class="container">
    <vcb1 class="vcb" ></vcb1>
    <vcb2 class="vcb" ></vcb2>
    <vcb3 class="vcb" ></vcb3>
    <vcb4 class="vcb" ></vcb4>
</div>

```

其中src 为自定义组件存放的位置，name 为使用组件时的标签名，如果没有设置name,则默认使用hml文件名作为组件名。

3.  如果对默认演示不满意可以在自定义组件源码中修改，也可以通过父组件与子组件之间的传值等来修改，具体方法可参考文档：
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/js-reference/%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6.md

也可以通过自定义事件来添加更多想要相应的事件，具体方法参考文档：

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/js-reference/%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6.md