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

需求:

密码框在编辑输入状态下 和 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"
解释:
  1. v-model : 绑定输入框的值到password

  2. show-password : 这个属性在Element UI的el-input组件中已经存在,用于自动处理显示和隐藏密码的功能,但如果想自定义图标,可以忽略这个属性。

  3. @focus 和 @blur : 这两个事件处理器用来在输入框获得焦点和失去焦点时改变showPassword的状态。这有助于在用户点击小眼睛图标之前保持当前的显示状态。

  4. :type : 根据showPassword的值来切换输入框的类型,如果是文本则显示明文,如果是密码则显示为密文。

  5. template #suffix : 这是Element UI的插槽语法,用于在输入框后添加自定义内容(如小眼睛图标)。点击这个图标会切换showPassword的值。

  6. i标签的class : 根据showPassword的值切换图标,使用Element UI的内置图标类(如el-icon-viewel-icon-view-off)。确保项目中已经正确引入了这些图标。如果没有,可以自定义图标或使用其他库提供的图标。

相关推荐
绝无仅有3 分钟前
某教育大厂面试题解析:MySQL索引、Redis缓存、Dubbo负载均衡等
vue.js·后端·面试
sean14 分钟前
开发一个自己的 claude code
前端·后端·ai编程
用户214118326360218 分钟前
dify案例分享-用 Dify 一键生成教学动画 HTML!AI 助力,3 分钟搞定专业级课件
前端
chxii36 分钟前
ISO 8601日期时间标准及其在JavaScript、SQLite与MySQL中的应用解析
开发语言·javascript·数据库
没逛够1 小时前
Vue 自适应高度表格
javascript·vue.js·elementui
太过平凡的小蚂蚁2 小时前
Kotlin 协程中常见的异步返回与控制方式(速览)
开发语言·前端·kotlin
苹果醋33 小时前
JAVA面试汇总(二)多线程(五)
运维·vue.js·spring boot·nginx·课程设计
咖啡の猫3 小时前
Vue初始化脚手架
前端·javascript·vue.js
一 乐3 小时前
汽车销售|汽车推荐|基于SprinBoot+vue的新能源汽车个性化推荐系统(源码+数据库+文档)
java·数据库·vue.js·汽车·毕设·汽车个性化推荐
晨枫阳3 小时前
uniapp兼容问题处理总结
前端·vue.js·uni-app