筆者工作中會經常用到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.為事件添加條件，當time>0時，即倒計時進行中要做什么——設置“time”Lable文字從60-0開始倒數。

1)添加條件，變量值“time”大于0。

2)設置time值等于[[time-1]]，如下圖。

3)設置“time”文本等于變量值“time”，如下圖。

3.在“狀態改變時”中新建case2，此步驟實現time<0，即倒計時結束后要做什么，如下圖。

1)設置啟用“btn”矩形，如下圖。

2)設置“文字”面板狀態為“發送”，如下圖。

OK，大功告成，趕緊運行看看吧！

本文由 @ningmengsuan 原創發布于人人都是產品經理。未經許可，禁止轉載。