当前位置：首页 > web >正文

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

web 2025/8/20 10:24:41

需求：

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

效果：

代码：

<template><el-inputid="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）。确保项目中已经正确引入了这些图标。如果没有，可以自定义图标或使用其他库提供的图标。