elementUI中輸入框的密碼框?qū)傩裕?br>

默認是一個始終睜眼的圖標，測試今天提bug要有閉眼效果（無大語）…
因為elementUI中的icon沒有閉眼的，所以還要去iconfront下載引入
效果圖：

點擊后

一、下載圖標

https://www.iconfont.cn 搜索閉眼，找到合適圖表，加入購物車，然后點擊右上購物車，下載代碼

二、項目引入

1. 下載的zip解壓到項目的靜態(tài)資源文件夾，如static，重命名一個合適名字
   
   
2. 需要使用的頁面中import引入iconfont.css，路徑要正確，

import iconfont from '../../../static/images/iconfont/iconfont.css'

3. 定義icon iconfont類樣式（可以隨便改間距大小之類的）

.icon, .iconfont {
  font-family:"iconfont" !important;
  font-size: 16px;
  font-style: normal;
  line-height: 32px;
  height: 100%;
  width: 25px;
  margin-right: 5px;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
}

4. data中定義幾個用到的變量

      icon: "icon iconfont icon-biyan",	// 控制圖標顯示
      showpwd:false,	// 用來判斷當前是否顯示密碼
      inputType:'password'	//input框的type類型

6. 給el-ipnut框添加圖標插槽

 		<el-input
          size="small"
          :type="inputType"
          placeholder="請輸入密碼"
        >
          <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          <i slot="suffix" :class="icon" @click="showPass"></i>
        </el-input>

7. 定義showPass方法（別問樣式和type控制為啥不簡寫到input上，習慣了，就是懶）

    showPass(){
        if(!this.showpwd){
          this.icon = "el-input__icon el-icon-view";
          this.showpwd=true
          this.inputType='input'
        }
        else{
          this.icon = "icon iconfont icon-biyan";
          this.showpwd=false
          this.inputType='password'
        }
    },

注：icon-biyan是你圖標的名稱，不統(tǒng)一?？梢栽谙螺d的iconfont中打開iconfont.css，查看你圖標的名稱

至此效果完成，不需要給el-input增加show-password屬性，因為它會自己多個圖標文章來源地址http://www.zghlxwxcb.cn/news/detail-467405.html

到了這里，關(guān)于【餓了么UI】elementUI密碼框圖標實現(xiàn)睜眼和閉眼效果（阿里巴巴iconfront圖標庫vue項目本地引用）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！