ElementUI的輸入框里有一個(gè)屬性，叫做show-password，他的作用是在輸入框后面出現(xiàn)一個(gè)小眼睛，點(diǎn)擊小眼睛就能在密碼框和輸入框之間切換，但是有個(gè)小缺點(diǎn)，密碼可見和密碼不可見的時(shí)候，小眼睛的圖標(biāo)是不會(huì)變的，雖然不影響使用，但是在美觀方面還是不太夠格，上一篇文章我們講述了如何在項(xiàng)目中使用阿里巴巴矢量圖，現(xiàn)在我們通過阿里巴巴矢量圖來修改小眼睛的圖標(biāo)。

    首先我們來到阿里巴巴矢量圖標(biāo)庫隨便找一個(gè)閉眼睛的小圖標(biāo)，然后按照該篇文章方法把閉眼睛圖標(biāo)放到我們的項(xiàng)目中。

先來整理一下思路，密碼框和文本框最大的不同就是input的type屬性，一個(gè)是password。

，一個(gè)是text，我們可以的定義一個(gè)布爾值，根據(jù)三元運(yùn)算符來動(dòng)態(tài)改變input的type屬性。

    比較困難的就是小圖標(biāo)的修改了，最開始我想的是通過定位來改變小圖標(biāo)，后來通過查閱資料發(fā)現(xiàn)，element是自帶插槽的，我們可以直接在input里新寫一個(gè)i標(biāo)簽，就能直接使用，

    同樣的，根據(jù)三元運(yùn)算符來動(dòng)態(tài)改變小圖標(biāo)的圖案，并且給i標(biāo)簽一個(gè)點(diǎn)擊事件，每次點(diǎn)擊修改布爾值。

 代碼如下：

這里的:class中我們使用了阿里巴巴的矢量圖，iconfont和icon-biyanjing就是使用的示例，是不是非常簡單呢。

最后我們?cè)俑鶕?jù)正則規(guī)定用戶在文本框中只能輸入英文、數(shù)字和.-+_。避免切換回文本框輸入文本的問題。

最后附上效果圖：