Vue input密码输入框自定义密码眼睛icon

最新推荐文章于 2024-06-29 10:05:11 发布
最新推荐文章于 2024-06-29 10:05:11 发布
阅读量516 收藏
点赞数 11
分类专栏： JS实战记录 vue2实战记录 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37635012/article/details/137449646
版权
本文介绍如何在Vue项目中根据设计稿自定义密码输入框的眼睛图标，通过实现点击切换显示/隐藏密码的功能。使用饿了么UI组件库为基础，详细讲解数据绑定和方法实现。
摘要由CSDN通过智能技术生成

我们用的饿了么UI组件库里，密码输入框的icon是固定不变的，如下所示：
在这里插入图片描述
点击"眼睛"这个icon不变，现在需求是UI给的设计稿里，密码输入框的"眼睛"有如下两种：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
代码如下：

  <el-input
              :</
了解本专栏 订阅专栏 解锁全文 超级会员免费看
百思不得小李
关注
  • 11
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
js中的input 显示与隐藏
llt299022的博客
02-06 3888
<!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
input输入款点击小眼睛显示或隐藏密码
04-19
前端登录界面输入密码，input输入款点击小眼睛显示或隐藏密码。
vue给input密码框设置眼睛睁开闭合对于密码显示与隐藏
szzlh123456789的博客
04-01 1067
【代码】vue给input密码框设置眼睛睁开闭合对于密码显示与隐藏。
Vue+ElementUI 密码文本框小眼睛设置密码可见性
最新发布
m0_63079450的博客
06-29 502
在input输入框中可以添加小眼睛图标，点击小眼睛即可设置密码可见性，组件主要使用elementUI,需要提前导入elementUI。
lement的input密码框小眼睛（点击眼睛显示密码,再次点击图标隐藏密码）
有问题可关注公众号：前端研究院 后台输入问题回复
03-09 1116
一、知识点： 带 icon 的输入框，可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。 因为图标涉及点击事件，带 icon 的输入框，采用的是 slot 方式。 slot=“suffix” 表示，图标会出现在input 的尾部；
input如何显示密码隐藏密码，点击小眼睛显示隐藏密码
m0_62709532的博客
03-31 7748
【代码】input如何显示密码隐藏密码，点击小眼睛显示隐藏密码。
自定义input密码框眼睛显示隐藏（vue3+ts）
m0_69688393的博客
12-09 1957
自定义input密码框眼睛显示隐藏（vue3+ts）
vue+elementUi 实现密码显示/隐藏+小图标变化功能
10-15
1. 在Vue模板中，使用`el-input`组件创建一个密码输入框，并通过`v-model`指令与Vue实例的数据属性进行双向数据绑定。这里绑定的数据属性用来存储用户输入的密码值。 2. `el-input`的`:type`属性设置为`pwdType`...
Vue基于iview实现登录密码的显示与隐藏功能
10-15
2. **判断当前密码显示状态**：使用Vue的条件渲染指令`v-if`和`v-else`来控制密码输入框的显示或隐藏。我们用一个布尔类型变量`switchPassDisFlag`来记录当前的显示状态。默认情况下，`switchPassDisFlag`为`false`...
vue实现密码显示与隐藏按钮的自定义组件功能
10-17
在自定义组件内部，需要定义一个数据属性（data property）来存储当前输入框的值，并使用计算属性（computed property）来根据一个布尔型的显示/隐藏状态切换input标签的type属性，从而控制密码是以明文还是星号显示...
vue基于 input 实现密码的显示与隐藏功能
weixin_62897746的博客
12-03 4957
前言： 大家都知道，一般情况下，输入框的密码我们是看不到密码的，只有当我们点击查看密码的小图标时，密码才会显现出来，实现起来也非常简单，通过点击图标让input的type属性变化即可。 代码讲解： 使用Color的true或false判断显示图标的样式，input框则使用Type的样式进行显示，@click="Show"点击修改密码的显示或者隐藏
element-ui el-input 密码输入框自定义显示隐藏图标
我总是词不达意的博客
12-17 3787
element-ui el-input 密码输入框自定义显示隐藏图标
vue 原生input 密码显示与隐藏
努力搬砖的小码
11-01 1155
vue 原生input 密码显示与隐藏
密码查看小眼睛
zsq199771的博客
09-07 427
原理 js改变input的type值 代码部分： HTML INPUT :type="eyesStatus ? 'password' : 'text'" <div v-show="password.length" class="eyes_status" @click="changeEyes"> <img v-if="eyesStatus" src="../assets/img/close-eyes.png" alt="">
password 类型的 input 在右方会有一个 小眼睛
qiao
06-18 3796
input::-ms-clear{display:none;} input::-ms-reveal{display:none;}
实现密码框小眼睛效果
沐小侠
01-16 5928
点击眼睛显示密码,再次点击图标隐藏密码，需要变化的图标样式和input的显示方式。
js实现密码输入框点击小眼睛显示或隐藏密码
努力变好
10-17 5844
登录页密码框加密输入不知道对错，加个小眼睛方便查看和修改，下面是小眼睛效果图，如果不喜欢这个图标可以自己去。（因为只把密码输入框展示出来了，所以样式自行调整，只给你们展示功能代码）
nvue 密码输入框 小眼睛
05-11
你想在 nvue 中实现密码输入框的小眼睛效果，可以使用 uni-icons 中的图标库，其中有“eye”和“eye-off”两个图标，分别表示显示密码和隐藏密码。具体实现步骤如下： 1. 在 nvue 页面中引入 uni-icons 组件库 ```html <template> <view> <uni-icons></uni-icons> </view> </template> <script> import uniIcons from '@/uni-icons/uni-icons.vue' export default { components: { uniIcons } } </script> ``` 2. 在密码输入框旁边添加一个小眼睛图标，并设置点击事件 ```html <template> <view> <input type="password" v-model="password" /> <uni-icons class="eye-icon" :name="eyeIcon" @click="togglePassword"></uni-icons> </view> </template> <script> import uniIcons from '@/uni-icons/uni-icons.vue' export default { components: { uniIcons }, data() { return { password: '', showPassword: false } }, computed: { eyeIcon() { return this.showPassword ? 'eye' : 'eye-off' } }, methods: { togglePassword() { this.showPassword = !this.showPassword } } } </script> <style scoped> .eye-icon { position: absolute; right: 10px; top: 10px; font-size: 26px; color: #999; cursor: pointer; } </style> ``` 3. 在点击事件中切换密码输入框的 input type 属性 ```html <template> <view> <input :type="showPassword ? 'text' : 'password'" v-model="password" /> <uni-icons class="eye-icon" :name="eyeIcon" @click="togglePassword"></uni-icons> </view> </template> <script> import uniIcons from '@/uni-icons/uni-icons.vue' export default { components: { uniIcons }, data() { return { password: '', showPassword: false } }, computed: { eyeIcon() { return this.showPassword ? 'eye' : 'eye-off' } }, methods: { togglePassword() { this.showPassword = !this.showPassword } } } </script> <style scoped> .eye-icon { position: absolute; right: 10px; top: 10px; font-size: 26px; color: #999; cursor: pointer; } </style> ``` 通过上述步骤，你就可以在 nvue 中实现密码输入框的小眼睛效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值