本文要給大家講解的是，按鈕與文本框結合在一起的動态重置功能，enjoy~

設置文本

1.1 頁面布局

1.1.1 頁面設定

新建一個頁面文件，命名為“重置功能”。

在“重置功能”頁面内新建一個命名為“窗口”的【組合文件】，并在【組合文件】内分别新建命名為“模闆備注”、“字典名稱、“左上””的【組合文件】和命名為“重置按鈕”、“窗口背景”的【矩形】元件。

（1）模闆備注

從元件庫内分别拉入兩個【矩形】和一個【文本框】元件分别做“模闆備注-标題”、“模闆備注-文本框”、“模闆備注-背景”。

“模闆備注-背景”的填充色為#ffffff，邊框為1px實線、色值#e4e4e4，“模闆備注-文本框”沒有邊框、框内字體大小為12px、字體顔色為#333333填充色為#ffffff、并在屬性-類型-提示文字内輸入請輸入描述内容（文字大小為12px，字體顔色為#333333）、高度為162px、寬度為233px，, “模闆備注-标題”的填充色為透明、沒有邊框、字體為黑體大小為12px、色值為#666666。

（2）字典名稱

從元件庫内分别拉入兩個【矩形】和一個【文本框】元件分别做“字典名稱-标題”、“字典名稱-文本框”、“字典名稱-背景”。

“字典名稱-背景”的填充色為#ffffff，邊框為1px實線、色值#e4e4e4，“字典名稱-文本框”沒有邊框、框内字體大小為12px、字體顔色為#333333填充色為#ffffff、高度為21px、寬度為233px，, “字典名稱-标題”的填充色為透明、沒有邊框、字體為黑體大小為12px、色值為#666666。

1.2 動态交互

1.2.1 效果設計

（1）重置按鈕的交互樣式設置

選中“重置”按鈕，進行【交互樣式設置】，将鼠标懸停、鼠标按下、選中的交互樣式的填充顔色設為#00CC00。

（2）文本框的交互樣式設置

選中【文本框】元件，将【類型】設置為查詢（在文本框内輸入文字的時候，則會出現清除框内文字的交互效果），隐藏提示觸發勾選為輸入。

1.2.2 交互流程

（1）重置按鈕聯動字典名稱和模闆備注文本框的動态交互效果

選中“重置”按鈕，在【屬性】中設定【鼠标單擊時】的交互用例，并配置相關的動作。

步驟一：設置用例名稱的編輯條件

在【條件設立】中添加【元件文字】動作，選擇“模闆備注-文本框”和“字典名稱-文本框”，将兩者的值設為不等于（！=）空條件。

步驟二：設置“模闆備注-文本框”&“字典名稱-文本框”的動态交互效果

在case1【組織動作】中添加【設置文本】的動作，在【配置動作】内勾選“模闆備注-文本框”和“字典名稱-文本框”，設置文本為：值=空。

1.3 預覽效果

請路過的朋友們多多支持哈，卧枕江山在這裡先謝謝了，以後會有更多優質的文章和産品在這個平台上進行發布，請盡請期待呦！

本文由 @卧枕江山 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

,

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

查看全部