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

相关推荐
golang学习记1 小时前
从0死磕全栈之Next.js App Router动态路由详解:从入门到实战
前端
huangql5201 小时前
基于前端+Node.js 的 Markdown 笔记 PDF 导出系统完整实战
前端·笔记·node.js
在逃的吗喽1 小时前
Vue3新变化
前端·javascript·vue.js
yqwang_cn1 小时前
打造优雅的用户体验:自定义jQuery工具提示插件开发全解析
前端·jquery·ux
小Tomkk1 小时前
AI 提效:利用 AI 从前端 快速转型为UI/UX设计师和产品
前端·人工智能·ui
Demoncode_y2 小时前
Vue3中基于路由的动态递归菜单组件实现
前端·javascript·vue.js·学习·递归·菜单组件
杨超越luckly2 小时前
HTML应用指南:利用POST请求获取全国中国工商农业银行网点位置信息
大数据·前端·html·数据可视化·银行网点
Never_Satisfied2 小时前
在JavaScript / HTML中,浏览器提示 “Refused to execute inline event handler” 错误
开发语言·javascript·html
Never_Satisfied2 小时前
在JavaScript / HTML中,事件监听的捕获和冒泡阶段解析
开发语言·javascript·html
皮蛋瘦肉粥_1213 小时前
pink老师html5+css3day02
前端·css3·html5