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

使用到的元件

一個(gè)文本框：

一個(gè)睜眼Icon：

一個(gè)閉眼Icon：

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

操作步驟

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

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

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

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

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

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

2）第二個(gè)交互動(dòng)作，將文本框“不可見”的文字賦予“可見”文本框

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

1）點(diǎn)擊睜眼前，輸入“123123”

2）點(diǎn)擊睜眼后

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

（8）再看看效果

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

2）點(diǎn)擊閉眼后

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

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