本文教大家如何使用動態(tài)面板實現(xiàn)密碼可見性切換，一起來看看~

使用到的元件

一個文本框：

一個睜眼Icon：

一個閉眼Icon：

PS：許多需要用到的Icon都可以在阿里巴巴矢量圖標(biāo)庫里面搜索到然后進行下載（全部免費）或者直接復(fù)制svg然后粘貼到Axure里面即可。

操作步驟

（1）將文本框轉(zhuǎn)換為動態(tài)面板

（2）設(shè)置兩個面板，一個面板命名為“不可見”，另一個命名為“可見”

（3）編輯“不可見”面板，設(shè)置文本框類型為“密碼”

（4）編輯“可見”面板，拉入一個文本框，類型為“Text”

（5）設(shè)置“睜眼”Icon的兩個交互動作

1）第一個交互動作，切換面板狀態(tài)

2）第二個交互動作，將文本框“不可見”的文字賦予“可見”文本框

（6）確定之后就可以“預(yù)覽”看效果了

1）點擊睜眼前，輸入“123123”

2）點擊睜眼后

（7）同理我們設(shè)置一下“閉眼”的交互動作

（8）再看看效果

1）閉眼前，再輸入“123”

2）點擊閉眼后

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

題圖來自 Unsplash ，基于 CC0 協(xié)議