建立自己的元件库(二)——验证码.pdfVIP

建立自己的元件库（二） —— 验证码 笔者工作中会经常用到 Axure ，所以这篇文章距离上篇的时间间隔不会很长，而且以后也会 持续更新，也希望有更快捷、简便方法的朋友可以多提意见。 实际上我们日常常用的元件往往都不是多难做的，但是若存下来却会省下很多时间。今天笔者写的 就是一个比较简单的元件 —— 验证码。 功能描述： 点击 发送验证码“ ”按钮，显示 “60s后重发 ”，然后一直切换，直到变回 发送验证码“ ”字样。 第一步：画出对应的组件 在这里我们需要一个矩形作为文本框的外框、一个文本框、一个动态面板存放文字、一个 发送验“ 证码 ”的按钮。 1.画一个矩形作为文本框的外边框，圆角半径设为 8 。大家都知道， Axure 提供的文本框的外边框并 不这么美观，为了好看我们可以自己画一个，如下图。 2.画一个文本框，隐藏外边框，在 提示文字“ ”中输入 请输入验证码“ ”，如下图。 3.拖进一个动态面板，名称 文字“ ”，建立 2 个状态，名称分别为 发送“ ”、 倒计时“ ”，用来存放 2 个文字 状态，如下图。 注意，状态 倒计时“ ”中的 “60是一个单独的” lable ，名称为 “time。（这里我为了看起来清晰，文本颜” 色设为黑色，后面改成了白色） 4.再拖进一个动态面板，名称为 计时器“ ”，建立 2个状态。这个动态面板使用来计时来改变秒数文 字的。 5.画一个按钮，名称为 按钮“ ”。 1)圆角半径设为 8 ，注意这个值是要与刚刚的矩形圆角半径设为一样的； 2)然后选择左半边为直角，右半边为圆角即可，如下图。 3)为 按钮“ ”矩形设置禁用样式，如下图。 4) 选择 文字“ ”面板和 按钮“ ”矩形，组合，这不操作是为了方便后面添加点击事件。 4. 最后，调整位置，如下图。 第二步：为按钮添加事件 ——“鼠标单击时 ” 此步骤要实现点击按钮后，改变文字，文字由 发送验证码“ ”变为 “60s后重新发送 ”，且按钮在这 60s 中 不可点击。 1.设置按钮为禁用状态，如下图。 2.切换 文字“ ”动态面板状态，如下图。 3.设置 计时器“ ”面板的状态循环，如下图。 第三步：改变 计时器“ ”面板状态来计时 此步骤要实现倒计时功能以及 60s 之后，按钮变回 发送验证码“ ”。此时需要分为倒计时过程中和倒计 时结束 2种情况。 1.为 计时器“ ”面板添加事件 —— 状态改变时，添加全局变量 “time，设置默认值为” 60 ，如下图。 2.为事件添加条件，当 time0 时，即倒计时进行中要做什么 —— 设置 “time ”Lable文字从 60-0 开始 倒数。 1)添加条件，变量值 “time大于” 0 。 2)设置 time 值等于 [[time-1]] ，如下图。 3)设置 “time文本等于变量值” “time，如下图。” 3.在 状态改变时“ ”中新建 case2 ，此步骤实现 time0 ，即倒计时结束后要做什么，如下图。 1)设置启用 “btn矩形，如下图。” 2)设置 文字“ ”面板状态为 发送“ ”，如下图。 OK ，大功告成，赶紧运行看看吧！ 人人都是产品经理（ ）中国最大最活跃的产品经理学习、交流、分享平台