el-input 重写带图标密码框（点击小眼睛显示、隐藏密码）

Aotman_2025-08-22 17:26

需求：

密码框在编辑输入状态下和 disabled 禁用状态下都可以展示明文和密文，官方组件在disabled 下不支持，需重写。

效果：

代码：

复制代码

<template>
  <el-input
    id="password"
    placeholder="请输入密码"
    v-model="password"
    autocomplete="new-password"
    :type="showPassword ? 'text' : 'password'"
    :disabled="true"
  >
    <template #suffix>
      <i :class="showPassword ? 'icon icon-view' : 'icon icon-view-off'" @click="showPassword = !showPassword"></i>
    </template>
  </el-input>
</template>
 
<script>
export default {
  data() {
    return {
      password: '', // 绑定的密码值
      showPassword: false, // 控制密码是否显示为明文
    };
  },
};
</script>
<style lang="less" scoped>
  i.icon{
    display: inline-block;
    height: 20px;
    width: 20px;
    margin-left: 6px;
    position: relative;
    top: 3px;
    &:hover {
      cursor: pointer;
    }
    background: url('../../assets/image/view.png') center 2px no-repeat;
    background-size: contain;
    &.icon-view{
      background-image: url('../../assets/image/view.png');
    }
    &.icon-view-off{
      background-image: url('../../assets/image/viewoff.png');
    }
  }
</style>

扩展：

复制代码

    @focus="showPassword = true"
    @blur="showPassword = false"

解释：

v-model : 绑定输入框的值到password。
show-password : 这个属性在Element UI的el-input组件中已经存在，用于自动处理显示和隐藏密码的功能，但如果想自定义图标，可以忽略这个属性。
@focus 和 @blur : 这两个事件处理器用来在输入框获得焦点和失去焦点时改变showPassword的状态。这有助于在用户点击小眼睛图标之前保持当前的显示状态。
:type : 根据showPassword的值来切换输入框的类型，如果是文本则显示明文，如果是密码则显示为密文。
template #suffix : 这是Element UI的插槽语法，用于在输入框后添加自定义内容（如小眼睛图标）。点击这个图标会切换showPassword的值。
i标签的class : 根据showPassword的值切换图标，使用Element UI的内置图标类（如el-icon-view和el-icon-view-off）。确保项目中已经正确引入了这些图标。如果没有，可以自定义图标或使用其他库提供的图标。