elementUI中输入框的密码框属性，

默认是一个始终睁眼的图标，测试今天提bug要有闭眼效果（无大语）…
因为elementUI中的icon没有闭眼的，所以还要去iconfront下载引入
效果图：

点击后

一、下载图标

https://www.iconfont.cn 搜索闭眼，找到合适图表，加入购物车，然后点击右上购物车，下载代码

二、项目引入

1. 下载的zip解压到项目的静态资源文件夹，如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是你图标的名称，不统一。可以在下载的iconfont中打开iconfont.css，查看你图标的名称

至此效果完成，不需要给el-input增加show-password属性，因为它会自己多个图标

三、以及已有iconfont.css怎么添加新的图标

如果想新加一些图标，重复上面官网下载的步骤后，打开新的iconfont.css，将@font-face和class类和加入到原来的iconfont.css中：

注意图中新加的@font-face的路径，是我自己重名过的。所以将新的iconfont.ttf 改名成iconfont2.ttf ，然后放到项目目录下。随后按第一次引入方式引入即可。