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

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

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

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

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

    同樣的，根據(jù)三元運算符來動態(tài)改變小圖標的圖案，并且給i標簽一個點擊事件，每次點擊修改布爾值。

 代碼如下：

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

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

最后附上效果圖：