Vue 2 + Element UI 实现密码显示、隐藏切换功能

一、使用 Element UI 的 show-password 属性

1、Element UI 的 <el-input> 组件提供了一个方便的 show-password 属性。启用后,它会自动添加一个切换密码显示、隐藏的按钮。

2、代码

javascript 复制代码
<template>
  <el-form-item prop="password">
    <el-input
      v-model="password"
      placeholder="请输入密码"
      type="password"
      show-password
    >
    </el-input>
  </el-form-item>
</template>

3、优点 :实现简单,无需额外代码。缺点:不支持自定义图标。

二、自定义后缀图标实现密码显示/隐藏

1、如果你想要使用自己的图标或实现更多自定义功能,可以通过 插槽(slot) 的方式来自定义后缀图标,并通过绑定事件来切换密码显示状态。

2、代码

javascript 复制代码
<el-input style="width: 315px;" :type="isShowPassword ? 'text' : 'password'" placeholder="请输入密码" v-model="password">
  <i slot="suffix" :class="isShowPassword ? 'el-icon-view' : 'el-icon-lock'" @click="isShowPassword = !isShowPassword"></i>
</el-input>

3、实现说明

(1)自定义插槽:使用 slot="suffix" 来自定义输入框的后缀区域。

(2)图标切换逻辑:定义一个布尔值变量 isShowPassword,用于跟踪密码的显示状态。绑定 @click 事件到后缀图标上,点击后切换 isShowPassword 的状态。

(3)输入框类型切换:通过 :type="isShowPassword ? 'text' : 'password'" 动态改变输入框的类型。

4、效果图

相关推荐
白水清风8 小时前
Vue3之响应式系统
vue.js·面试·前端工程化
console.log('npc')8 小时前
使用 Vue3 和 Element Plus 实现选择新增用户集下拉选项框,切换类型,有物业,网格,电子围栏,行政区划管理
javascript·vue.js·elementui
一只小阿乐8 小时前
做一个vue3 v-model 双向绑定的弹窗
javascript·vue.js·elementui·vue3·v-model
前端付豪8 小时前
项目启动:搭建Vue 3工程化项目
前端·javascript·vue.js
小琴爱减肥8 小时前
Vue3 组合式 API 实战
vue.js
秋田君9 小时前
3D热力图封装组件:Vue + Three.js 实现3D图表详解
javascript·vue.js·3d·three.js·热力图
一枚前端小能手9 小时前
🔄 重学Vue之生命周期 - 从源码层面解析到实战应用的完整指南
前端·javascript·vue.js
晓得迷路了10 小时前
栗子前端技术周刊第 103 期 - Vitest 4.0、Next.js 16、Vue Router 4.6...
前端·javascript·vue.js
咖啡の猫12 小时前
Vue混入
前端·javascript·vue.js
两个西柚呀16 小时前
未在props中声明的属性
前端·javascript·vue.js