ElementUI的輸入框里有一個屬性，叫做show-password，他的作用是在輸入框后面出現一個小眼睛，點擊小眼睛就能在密碼框和輸入框之間切換，但是有個小缺點，密碼可見和密碼不可見的時候，小眼睛的圖標是不會變的，雖然不影響使用，但是在美觀方面還是不太夠格，上一篇文章我們講述了如何在項目中使用阿里巴巴矢量圖，現在我們通過阿里巴巴矢量圖來修改小眼睛的圖標。
首先我們來到阿里巴巴矢量圖標庫隨便找一個閉眼睛的小圖標，然后按照該篇文章方法把閉眼睛圖標放到我們的項目中。
先來整理一下思路，密碼框和文本框最大的不同就是input的type屬性，一個是password。
，一個是text，我們可以的定義一個布爾值，根據三元運算符來動態改變input的type屬性。
比較困難的就是小圖標的修改了，最開始我想的是通過定位來改變小圖標，后來通過查閱資料發現，element是自帶插槽的，我們可以直接在input里新寫一個i標簽，就能直接使用，
同樣的，根據三元運算符來動態改變小圖標的圖案，并且給i標簽一個點擊事件，每次點擊修改布爾值。
代碼如下：
這里的:class中我們使用了阿里巴巴的矢量圖，iconfont和icon-biyanjing就是使用的示例，是不是非常簡單呢。
最后我們再根據正則規定用戶在文本框中只能輸入英文、數字和.-+_。避免切換回文本框輸入文本的問題。
最后附上效果圖：
上一篇： 阿里巴巴矢量圖在vue項目中的運用
