這個控件是我們在平時寫原型時經常用到的，希望能對小白有點幫助（本人菜鳥），高端人士請繞過。

一、創建一個自己的元件庫

創建自己的元件庫，在今後使用這些控件的時候就不需要再去做了，直接拿來使用就行了：

1. 點擊元件庫旁的“三”按鈕，顯示如①圖，創建元件庫，輸入任意名稱保存；
2. 在新出現的頁面中雙擊（新元件1）出現新的編輯界面——可以重命名，可以創建多個元件，作為你自己的元件庫；
3. 制作元件以後一定要保存，使用時會出現在元件庫菜單中，沒有出現的話點擊“三”刷新或載入元件庫。

以上就是創建一個自己的元件庫的過程啦 ，自己做的小控件都可以保存在裡面；下面我們開始制作小元件。

二、驗證碼倒計時

在視窗左上角找到項目，先設置一個全局變量，名稱随意比如clock，确定保存。

新建一個空白的動态面闆（計時器），為它設置兩個狀态State1、State2，并隐藏動态面闆。

新建一個按鈕獲取驗證碼，并為它設置用例鼠标單擊時：

• 設置全局變量-設置變量值：clock=120；
• 設置元件-設置面闆狀态：計時器=NEXT；向後循環；循環間隔1000毫秒；如果為了演示速度加快，可以把循環間隔調小；據我測算，如果和實際的時間相等，間隔應該是975毫秒（因為狀态的切換需要消耗時間）；
• 設置元件-禁用：當前元件=禁用；使用交互樣式設置元件禁用時的樣式。

為動态面闆計時器設置用例狀态改變時：

case1

①添加條件=“值”[[clock]]>=2；

其中[[clock]]為“fx”中“插入變量或函數”時選擇全局變量clock；

②設置 全局變量-設置變量值：clock=[[clock-1]]；

其中[[clock-1]]為“fx”中“插入變量或函數”時選擇全局變量clock，并在”[[ ]]”内輸入“-1”；

③設置 元件-設置文本：當前元件（值）=[[clock]]秒再次獲取；

其中[[clock]]為“fx”中“插入變量或函數”時選擇全局變量clock。

case2

①設置 元件-設置面闆狀态：計時器=停止循環；

②設置 元件-設置文本：獲取驗證碼（值）=重新獲取驗證碼；

③設置 元件-啟用：當前元件=啟用。

這樣就是一個完整的獲取驗證碼原型啦！

原型獲取：這個示例包括手機号的位數、驗證碼位數等判斷；

提取碼: ghw9

歡迎大家交流！

本文由 @戎馬嘯西風 原創發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部