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的值

<!-- 密码 -->
<el-form-item class="opt"
              prop="password">
  <el-input prefix-icon="el-icon-lock"
            placeholder="请输入密码"
            :type="[flag?'text':'password']"
            v-model="loginForm.password">
    <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>
 </el-form-item>

data () {
    return {
      flag: false,
    }

最终效果：

点击小眼睛，密码显示