vue项目中密码输入框点击眼睛眯眼和睁眼

该问题主要会出现在vue2.0 element输入框中，因为element 输入框点击眼睛后图标不会改变，但elementplus中密码输入框可以睁眼闭眼，建议使用3.0+Plus就不会有这样的问题。

我们来谈谈element中的解决方案吧。

      <el-form-item prop="password">
              <el-input
                v-model="editItem.password"
                placeholder="请输入密码"
                autocomplete="off"
                @keyup.enter.native="Login"
                :type="passwordShow ? 'text' : 'password'"
              >
                <template #suffix
                  ><i
                    class="password-eyes"
                    @click="passwordShow = !passwordShow"
                  >
                    <img
                      :src="
                        passwordShow
                          ? require('../../src/assets/open-eye.png')
                          : require('../../src/assets/close-eye.png')
                      "
                    />
                  </i>
                </template>
              </el-input>
            </el-form-item>

如上代码所示，data中定义变量passwordShow,通过点击图标改变值为true或者false，即可控制图标的改变，重点是也要改变input的类型，:type="passwordShow ? 'text' : 'password'"