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

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

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

功能描述：

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

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

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

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

2.畫一個(gè)文本框，隱藏外邊框，在“提示文字”中輸入“請(qǐng)輸入驗(yàn)證碼”，如下圖。

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

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

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

5.畫一個(gè)按鈕，名稱為“按鈕”。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

OK，大功告成，趕緊運(yùn)行看看吧！

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