這個控件是我們在平時寫原型時經常用到的，希望能對小白有點幫助（本人菜鳥），高端人士請繞過。
一、創建一個自己的元件庫
創建自己的元件庫，在今後使用這些控件的時候就不需要再去做了，直接拿來使用就行了：
- 點擊元件庫旁的“三”按鈕，顯示如①圖，創建元件庫，輸入任意名稱保存；
- 在新出現的頁面中雙擊（新元件1）出現新的編輯界面——可以重命名，可以創建多個元件，作為你自己的元件庫；
- 製作元件以後一定要保存，使用時會出現在元件庫菜單中，沒有出現的話點擊“三”刷新或載入元件庫。
以上就是創建一個自己的元件庫的過程啦 ，自己做的小控件都可以保存在裡面；下面我們開始製作小元件。
二、驗證碼倒計時
在視窗左上角找到項目，先設置一個全局變量，名稱隨意比如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協議。
分享到:
閱讀更多 人人都是產品經理 的文章
