Element的input 实现带图标密码框的明密文（点击眼睛显示密码,再次点击图标隐藏密码）

更新： 新版本中，添加 show-password 属性，即可支持配置显示密码按钮；详情见：https://element.eleme.cn/#/zh-CN/component/changelog 和 https://element.eleme.cn/#/zh-CN/component/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="type"
      class="pwd-input"
      placeholder="请输入密码"
    >
      <i
        slot="suffix"
        class="icon-style"
        :class="elIcon"
        autocomplete="auto"
        @click="flag = !flag"
      />
    </el-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pwd: "123456",
      flag: false
    };
  },
  computed: {
    type() {
      return this.flag ? "text" : "password";
    },
    elIcon() {
      return this.flag ? "el-icon-minus" : "el-icon-view";
    }
  }
};
</script>
<style>
.icon-style {
  margin-top: 8px;
  font-size: 18px;
}
.pwd-input {
  border: 1px solid #fff;
  width: 250px;
}
</style>