vue Element-Ui 简单实现输入框密码的显示与隐藏

原创已于 2025-05-15 16:37:35 修改 · 1.5w 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Demos

当前文章被收录于：

Demos

21 篇文章 0 人学习

实战小demo

订阅专栏查看详情

当前文章被以下社区和专栏收录：

于 2022-04-13 12:27:40 首次发布

本文介绍了如何使用 Element-UI 框架轻松创建一个带有显示/隐藏功能的密码输入框。只需在 `<el-input>` 标签中添加 `type=password` 和 `show-password` 属性，即可实现点击眼睛图标切换密码明文和密文的显示状态。

一、效果如下：

element-ui 简单实现密码输入框的显示与隐藏

二、实现代码：

只需要在输入框代码中添加 show-password ，然后在你输入密码时会自动出现眼睛图标，点击图标就可以显示和隐藏密码。

<el-input type="password" prefix-icon="el-icon-lock" v-model="loginForm.passWord" show-password></el-input>

相关资料：

element-ui 图标库： https://element.eleme.cn/#/zh-CN/component/icon

标签

#vue.js #elementui #前端

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

*neverGiveUp*

关注关注

15
点赞
踩
15

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

vue2：el-table列中文字前面加icon图标的两种方式

l_q_l的专栏

03-14

533

如果是只读的，使用input，且添加锁标记，否则使用下拉框。2、input里面加icon。1、文字前面加icon。

element Ui 实现密码的显示与隐藏

明思齐的博客

04-21

5585

(输入框类型为密码，即所输入的内容都是以“密文”形式展示)点击查看小图标就可以查看了。我原先给密码输入框设置了。

2 条评论您还未登录，请先登录后发表或查看评论

Element UI 密码输入框--可切换显示隐藏，自定义图标

朝阳39的博客

10-20

2294

【代码】Element UI 密码输入框--可切换显示隐藏，自定义图标。

Vue+Element UI中优雅隐藏input[type=‘number‘]的上下箭头

最新发布

weixin_33670786的博客

04-06

408

本文详细介绍了在Vue+Element UI项目中如何优雅隐藏input[type='number']的上下箭头。通过分析浏览器差异和Vue scoped样式特性，提供了基于CSS和深度选择器的完整解决方案，并分享了实战中的常见问题与优化技巧，帮助开发者提升表单界面的美观性和用户体验。

elementUI 密码输入框小眼睛

专注前端开发领域，深耕 Python AI 大模型应用，热爱探索 Web 与人工智能的前沿技术。

01-06

929

elementUI 密码输入框小眼睛

element ui input输入框

qq_45030898的博客

01-04

3583

目录 1.简洁输入框 2.密码输入框（show-password) 3.带 icon 的输入框 4.文本域 5.复合型输入框 6.尺寸 7.带输入建议 8.输入长度限制 9.远程搜索 1.简洁输入框 clearable为清空按钮 <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="创建人"> <el-input v-model="fo.

vue实现页面锁屏完美解决

呵呵的牛

06-01

7052

vue实现页面锁屏完美解决

vue3下的密码输入框（antdesignvue）

sinat_31773153的博客

08-29

1325

vue3下的密码输入框（antdesignvue）

element-ui 密码输入框添加show-password属性，打开弹窗会自动填入密码 + 账户名问题

Shimeng_1989的博客

11-04

3632

element-ui 密码输入框添加show-password属性，打开弹窗会自动填入密码 + 账户名问题

element ui 的密码输入框点击显示隐藏密码时，图标随之改变

qq_59626859的博客

05-24

1543

通过修改el-input框的type属性，来设置显示或者隐藏。从而改变图标地址。

elementui 隐藏输入框_vue+element-ui实现显示隐藏密码

weixin_32334251的博客

01-26

4796

最终实现效果显示隐藏密码.gif实现思路(第一种方法)因为输入框本身没有切换明文与暗文的功能，所以我们要实现切换功能就需要两个输入框，通过JS来控制样式dispaly:none来指定谁被渲染出来。在VUE中来实现的话，因为数据绑定，所以会更简单一些。通过点击切换图标触发事件，然后使用v-if与v-else进行条件渲染即可。代码实现class="el-input__icon iconfont ico...

elementui 隐藏输入框_vue+elementUi 实现密码显示/隐藏+小图标变化功能

weixin_42512903的博客

12-23

2136

vue+elementUi 实现密码显示/隐藏+小图标变化(js一共三行代码，其中一行为了美观)...，先给大家展示下效果图，感觉不错可以参考实现代码。【效果图】【html】// 前后代码【略】【js】showPwd () {this.pwdType === 'password' ? this.pwdType = '' : this.pwdType = 'password';let e = doc...

el-input 标签中密码的显示和隐藏

HH_KELE的专栏

04-22

2583

效果展示：　　密码隐藏：　　密码显示：代码展示：　　一：<el-input>标签代码 <el-form-item label="密码" prop="password"> <el-input :type="passw" v-model="adduser.password" style="widt...

vue实现密码显示与隐藏的最简方法

qq_43557758的博客

04-07

7991

vue实现密码显示与隐藏的最简方法实现效果：（画质略糊见谅）要求：闭眼icon覆盖睁眼icon看起来和其本身一样我用的 icon链接：http://www.fontawesome.com.cn/faicons/ gif的完整代码：（有点长，但涉及密码显示隐藏的内容很短） <template> <div class="login"> <div class="loginTitle"> 管理员登录 <

25.(前端)登录form数据获取与验证

m0_63953077的博客

10-14

1997

使用element，获取表单数据，绑定表单，对form进行输入框验证

Vue——密码框显示和隐藏密码功能

weixin_43551242的博客

12-20

4843

方法一：使用element直接可以用的，密码显示隐藏功能 <el-input placeholder="请输入密码" v-model="input" show-password></el-input> <script> export default { data() { return { input: '' } } } </script> 方法2、 <el-form-item l..

HTML密码隐藏标签,el-input 标签中密码的显示和隐藏功能的实例代码

weixin_28753113的博客

06-04

565

效果展示：密码隐藏：密码显示：代码展示：一：标签代码二：中代码var app = new Vue({el:"#app",data:{users:[],total:100,pageSize:5,pageNum:1,//用于显示或隐藏添加修改表单add:false,//用于改变Input类型passw:"password",//用于更换Input中的图标icon:"el-input__icon el-...

Element的input密码框小眼睛（点击眼睛显示密码,再次点击图标隐藏密码）

weixin_55966654的博客

08-24

9512

一、知识点：带 icon 的输入框，可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。因为图标涉及点击事件，带 icon 的输入框，采用的是 slot 方式。 slot=“suffix” 表示，图标会出现在input 的尾部；二、实现思路要变化的有，图标样式和input的显示方式定义一个flag默认false，绑定input 的type值，flag为true时，type为 text 类型（可以看见数

vue+elementUi 实现密码显示/隐藏+小图标变化（js一共三行代码，其中一行为了美观）...

weixin_34075551的博客

03-01

6789

【效果图】【html】 // 前后代码【略】 <el-form-item label="密码" prop="pwd"> <el-input v-model="ruleForm.pwd" :type="pwdType" placeholder="请输入密码" @keyup.enter.native="login"&...