創(chuàng)建賬號時，輸入密碼和確認密碼一般都是隱藏的，會有個小眼睛來控制密碼是否顯示。在開發(fā)過程中，發(fā)現(xiàn)elementUI的show-password屬性并沒有生效。只能自己手寫嘍~

首先，給el-input加個小眼睛圖標，el-input的type設(shè)置為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>

然后，通過參數(shù)來動態(tài)綁定input的type、svg-icon的icon-class，給小眼睛綁定點擊事件來改變參數(shù)的值。這樣就可以任意切換了：

輸入框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]
}