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>