控制密码输入框是否显示明文

创建账号时，输入密码和确认密码一般都是隐藏的，会有个小眼睛来控制密码是否显示。在开发过程中，发现elementUI的show-password属性并没有生效。只能自己手写喽~

首先，给el-input加个小眼睛图标，el-input的type设置为password，效果如下：

输入框step1.png

代码：

<el-form-item label="账户密码：">
    <el-input v-model="adminPwd1" type="password" placeholder="请输入账户密码">
        //通过prefix-icon和suffix-icon属性在input组件首部和尾部增加显示图标，也可以通过slot来放置图标。
        <i slot="suffix">
            //阿里字体图标库
            <svg-icon icon-class="eye-open" />
        </i>
    </el-input>
</el-form-item>
<el-form-item label="账户密码：">
    <el-input v-model="adminPwd2" type="password" placeholder="请输入账户密码">
        <i slot="suffix">
            <svg-icon icon-class="eye-open" />
        </i>
    </el-input>
</el-form-item>

然后，通过参数来动态绑定input的type、svg-icon的icon-class，给小眼睛绑定点击事件来改变参数的值。这样就可以任意切换了：

输入框step2.png

代码：

//html:
<el-form-item label="账户密码：">
  <el-input v-model="adminPwd1" :type="passwordShow.pwd?'text':'password'" placeholder="请输入账户密码">
    <i slot="suffix" class="pwdIcon" @click="changePwdShow('pwd')">
      <svg-icon :icon-class="passwordShow.pwd?'eye-open':'eye-close'" />
    </i>
  </el-input>
 </el-form-item>
<el-form-item label="确认密码：">
  <el-input v-model="adminPwd2" :type="passwordShow.check?'text':'password'" placeholder="请再次输入密码">
    <i slot="suffix" class="pwdIcon" @click="changePwdShow('check')">
      <svg-icon :icon-class="passwordShow.check?'eye-open':'eye-close'" />
    </i>
  </el-input>
</el-form-item>

//data:
data() {
  return {
    passwordShow:{
      pwd : false,
      check : false
    }
  }
}

//methods:
changePwdShow(type){
  this.passwordShow[type] = !this.passwordShow[type]
}