vue项目密码框后面显示眼睛，点击可查看密码

最新推荐文章于 2025-02-21 09:15:42 发布
原创 最新推荐文章于 2025-02-21 09:15:42 发布 · 1.7k 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

文章介绍了如何在Vue项目中使用element-Plus组件实现密码框的显示/隐藏功能，只需在el-input元素上添加show-password属性即可实现点击眼睛查看密码的效果。

vue项目中，element-Plus密码框后面显示眼睛，点击可查看密码，只需要给el-input中添加show-password即可，如下：

在这里插入图片描述
实现效果如下：
在这里插入图片描述

Vue+element el-table中显示隐藏and重置密码功能
学习记录
01-20 5716
前言： 这是一个可以在 el-table 中显示、隐藏密码，并且具有重置密码的功能。虽然办法有点笨，但是确实是能实现功能的！本大二学生还需努力！ 1. 功能起源 element el-input 组件中有一个 show-password 属性，此属性可得到一个可切换显示隐藏的密码框，但是此属性只能使用在 el-input 组件中。 但是我在写项目中，有一个功能是在表格中可以显示隐藏密码，于是 show-password 属性 在表格中就不能使用了 于是自己冥思苦想想到了一个方法，可以在表格中显示、隐藏
WebAPI 操作元素案例 —— (小眼睛)显示密码
赚钱养自个儿的博客
04-16 631
学习来源：https://www.bilibili.com/video/BV1HJ41147DG     要求  点击按钮将密码框切换为文本框，并可查看密码明文 例如：京东(现在没有了) 思路  点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码了  一个按钮两个状态，依次切换为文本框，继续点击一次切换为密码框  利用一个flag变量来判断flag的值，如果是1就切换为文本框，flag设置...
JS实现表单中点击小眼睛显示隐藏密码框中的密码
11-20
领导交个一个任务，要求在表单中点击小眼睛显示隐藏密码框中的密码！在一些网站中经常会用到这样的功能，今天小编就给大家分享我的实现思路及代码 准备： 1.两张png图片，一张睁眼，一张闭眼，可以到阿里巴巴矢量图库寻找（免费下载） 最终效果图 css样式部分，样式可根据自己喜好设置，没有过硬要求 <style> div:first-child { width: 300px; height: 50px; background-color: red; color: white; margin: 20px auto;
vue基于 input 实现密码的显示与隐藏功能
weixin_62897746的博客
12-03 5824
前言： 大家都知道，一般情况下，输入框的密码我们是看不到密码的，只有当我们点击查看密码的小图标时，密码才会显现出来，实现起来也非常简单，通过点击图标让input的type属性变化即可。 代码讲解： 使用Color的true或false判断显示图标的样式，input框则使用Type的样式进行显示，@click="Show"点击修改密码的显示或者隐藏
Vue+ElementUI 密码文本框小眼睛设置密码可见性
m0_63079450的博客
06-29 1214
在input输入框中可以添加小眼睛图标，点击小眼睛即可设置密码可见性，组件主要使用elementUI,需要提前导入elementUI。
自定义input密码框眼睛显示隐藏（vue3+ts）
m0_69688393的博客
12-09 2444
自定义input密码框眼睛显示隐藏（vue3+ts）
精选资源
Bootstrap显示隐藏密码输入代码
04-07
这个压缩包文件“jiaoben5586”可能包含了实现上述功能的示例代码，你可以下载并查看其内容，以便于理解并应用到自己的项目中。在实际开发中，可以根据需求进行调整，例如添加自定义的样式或扩展更多的交互功能。总...
将密码框后面加上一个小眼睛，可以显示或隐藏输入的密码
08-02
- 用户想要一个图标，点击时可以切换密码的可见状态（即显示或隐藏密码）。 - 这类似于许多登录表单中的常见功能：一个眼睛图标，点击时切换输入类型（text 或 password）。 uni-app 是一个使用 Vue.js 的跨平台...
一篇解决Element ui密码框眼睛图标明文密文，不允许中文输入以及输入的各种校验
请告诉他
01-29 3586
先上效果，再上代码，后面有说明 HTML <el-form-item label="新密码" prop="cpPassword" style="margin-left: 13px;"> <el-input v-model="supplierEx.cpPassword" :type="pwdType2" placeholder="请输入密码" @keyup.enter.native="login"> <i slot...
在vue的tableOption中，我希望有一个密码输入的input，这个input默认展示明文密码，后面有一个小眼睛的按钮，点击之后可以关闭明文，展示密文，如何处理
最新发布
09-19
在 Vue 的 `tableOption` 中（通常用于如 `vue-element-admin` 或基于 `el-table` 的场景），如果你希望某个表格列显示为密码输入框，并且默认展示明文、带“小眼睛”图标用于切换是否隐藏密码（即切换 input 的 `...
element-ui 密码框显示小眼睛，点击可查看密码
笑到世界都狼狈的博客
02-03 6229
在项目开发的实际需求中，用户有时候可能不确认自己输入的密码是不是正确的，所以想要查看一下自己的密码是否输入正确，这个时间就需要小眼睛，进行点击查看。
Vue——密码框显示和隐藏密码功能
weixin_43551242的博客
12-20 4795
方法一：使用element直接可以用的，密码显示隐藏功能 <el-input placeholder="请输入密码" v-model="input" show-password></el-input> <script> export default { data() { return { input: '' } } } </script> 方法2、 <el-form-item l..
js中的input 显示与隐藏
llt299022的博客
02-06 4167
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
vue实现密码显示隐藏、很简单易懂
编程界明世隐的博客
03-19 5648
效果： 思路： 利用input的type属性，当type值是text的时候展示密码，当type值是password的时候隐藏密码； 于是很容易想到用v-bind来绑定type，同时用一个布尔值来控制，写成三元表达式的形式； 加入一个图片元素，点击图标元素切换这个布尔值，就可以达到切换显示隐藏，切换布尔值的同时也切换图标。 页面布局 <div id='app'> <!--三元表达式 pwdFlag为真则type是password密码隐藏 pwdFlag为假则
超简单~新手必会！！ Vue.js中实现登录密码框的“眼睛图标”交互效果
weixin_51828648的博客
02-21 627
之前的实现思路比较麻烦，是通过在input框后添加图标，给图标添加点击事件，来切换input的type属性 text-password来实现的，这种方法比较麻烦，需要使用到两个图标和点击事件以及v-if，后来突然发现一种超简单的方法，记录一下分享给各位。input类型设置为password，增加一条 show-password 属性即可，炒鸡简单，废话不多说，直接上代码。开发一个Vue项目，在登录页实现用户登录，密码框一般会有一个小眼睛的图标，用来让用户主动进行密码的显示隐藏功能，
vue项目中更改密码并验证
qq_42786138的博客
09-03 1330
data() { //此处即表单发送之前验证 let validateNewPassword = (rule, value, callback) => { if (value === this.form.password) { callback(new Error('新密码不能与原密码相同!')) } else { callback()...
vue给input密码框设置眼睛睁开闭合对于密码显示与隐藏
szzlh123456789的博客
04-01 1572
【代码】vue给input密码框设置眼睛睁开闭合对于密码显示与隐藏。
vue项目实战之点击小眼睛实现input密码框内容显示与隐藏
yinzisang的博客
11-02 8646
实现思路：我用的是element ui，实现方法和html一样。 1、给右侧小眼睛设置一个点击事件，通过点击事件修改密码输入框<el-input>的：type属性，：type的值在data里设置一个passworedtype属性，进行双向绑定，值为password时密码是密文形式，值为空显示。 2当data中passwordtype值变化时，眼睛小图标根据值变换样式，根据三目运算符。 3在点击事件方法使用this.$nextTick重新渲染dom元素 具体代码: <e
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值