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、效果图

相关推荐
试图让你心动4 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_4 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏5 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
小毛驴8506 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
白玉cfc8 小时前
【iOS】网易云仿写
ui·ios·objective-c
JSON_L10 小时前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊10 小时前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js
奇舞精选10 小时前
从零开始实现Vue3+WebAssembly万级数据表格开发流程
vue.js·webassembly
小马哥编程12 小时前
如何解决 undetected_chromedriver 启动慢问题
chrome·selenium·ui
Britney⁺♛&?ꪶꪫꪜꫀ13 小时前
Vue2上
vue.js·npm