Element UI 密码输入框--可切换显示隐藏，自定义图标

<el-form-item prop="password">
        <el-input
          @keyup.enter.native="login"
          placeholder="密码"
          v-model="formData.password"
          :type="showPassword ? 'text' : 'password'"
        >
          <i slot="suffix" @click="switchPassword">
            <img
              v-if="showPassword"
              class="input_icon"
              src="@/assets/icons/password_show.png"
            />
            <img
              v-else
              class="input_icon"
              src="@/assets/icons/password_hide.png"
            />
          </i>
        </el-input>
      </el-form-item>

.input_icon {
  cursor: pointer;
  width: 24px;
  padding-top: 8px;
  padding-right: 6px;
}

data 中

// 是否显示密码
      showPassword: false,

methods 中

switchPassword() {
      this.showPassword = !this.showPassword;
    }

图片素材