Element的input 實現帶圖標密碼框的明密文（點擊眼睛顯示密碼,再次點擊圖標隱藏密碼）

點擊眼睛圖標顯示密碼,再次點擊圖標隱藏密碼

一、知識點：

1. 帶 icon 的輸入框，可以通過 prefix-icon 和 suffix-icon 屬性在 input 組件首部和尾部增加顯示圖標，也可以通過 slot 來放置圖標。
2. 因爲圖標涉及點擊事件，帶 icon 的輸入框，採用的是 slot 方式。
3. slot="suffix" 表示，圖標會出現在input 的尾部；

二、實現思路

1. 要變化的有，圖標樣式和input的顯示方式
2. 定義一個flag默認false，綁定input 的type值，flag爲true時，type爲 text 類型（可以看見數字，實現顯示密碼），否則爲 password 類型（隱藏密碼）
3. 圖標隨之改變，也需綁定class,點擊圖標時，改變flag的值

<template>
  <div class="login-container">
    <el-input v-model="pwd" :type="[flag?'text':'password']" style="border:1px solid #fff;width:250px;" placeholder="請輸入密碼">
      <i slot="suffix" :class="[flag?'el-icon-minus':'el-icon-view']" style="margin-top:8px;font-size:18px;" autocomplete="auto" @click="flag=!flag" />
    </el-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pwd: '123456',
      flag: false
    }
  }
}
</script>