筆者工作中會經(jīng)常用到Axure，所以這篇文章距離上篇的時間間隔不會很長，而且以后也會持續(xù)更新，也希望有更快捷、簡便方法的朋友可以多提意見。

上篇文章：建立自己的元件庫（一）——輪播圖

實際上我們?nèi)粘３Ｓ玫脑疾皇嵌嚯y做的，但是若存下來卻會省下很多時間。今天筆者寫的就是一個比較簡單的元件——驗證碼。

功能描述：

點擊“發(fā)送驗證碼”按鈕，顯示“60s后重發(fā)”，然后一直切換，直到變回“發(fā)送驗證碼”字樣。

第一步：畫出對應(yīng)的組件

在這里我們需要一個矩形作為文本框的外框、一個文本框、一個動態(tài)面板存放文字、一個“發(fā)送驗證碼”的按鈕。

1.畫一個矩形作為文本框的外邊框，圓角半徑設(shè)為8。大家都知道，Axure提供的文本框的外邊框并不這么美觀，為了好看我們可以自己畫一個，如下圖。

2.畫一個文本框，隱藏外邊框，在“提示文字”中輸入“請輸入驗證碼”，如下圖。

3.拖進一個動態(tài)面板，名稱“文字”，建立2個狀態(tài)，名稱分別為“發(fā)送”、“倒計時”，用來存放2個文字狀態(tài)，如下圖。

注意，狀態(tài)“倒計時”中的“60”是一個單獨的lable，名稱為“time”。（這里我為了看起來清晰，文本顏色設(shè)為黑色，后面改成了白色）

4.再拖進一個動態(tài)面板，名稱為“計時器”，建立2個狀態(tài)。這個動態(tài)面板使用來計時來改變秒數(shù)文字的。

5.畫一個按鈕，名稱為“按鈕”。

1)圓角半徑設(shè)為8，注意這個值是要與剛剛的矩形圓角半徑設(shè)為一樣的；

2)然后選擇左半邊為直角，右半邊為圓角即可，如下圖。

3)為“按鈕”矩形設(shè)置禁用樣式，如下圖。

4)選擇“文字”面板和“按鈕”矩形，組合，這不操作是為了方便后面添加點擊事件。

4.最后，調(diào)整位置，如下圖。

第二步：為按鈕添加事件——“鼠標(biāo)單擊時”

此步驟要實現(xiàn)點擊按鈕后，改變文字，文字由“發(fā)送驗證碼”變?yōu)椤?0s后重新發(fā)送”，且按鈕在這60s中不可點擊。

1.設(shè)置按鈕為禁用狀態(tài)，如下圖。

2.切換“文字”動態(tài)面板狀態(tài)，如下圖。

3.設(shè)置“計時器”面板的狀態(tài)循環(huán)，如下圖。

第三步：改變“計時器”面板狀態(tài)來計時

此步驟要實現(xiàn)倒計時功能以及60s之后，按鈕變回“發(fā)送驗證碼”。此時需要分為倒計時過程中和倒計時結(jié)束2種情況。

1.為“計時器”面板添加事件——狀態(tài)改變時，添加全局變量“time”，設(shè)置默認(rèn)值為60，如下圖。

2.為事件添加條件，當(dāng)time>0時，即倒計時進行中要做什么——設(shè)置“time”Lable文字從60-0開始倒數(shù)。

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

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

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

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

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

2)設(shè)置“文字”面板狀態(tài)為“發(fā)送”，如下圖。

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

本文由 @ningmengsuan 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。