基于vue ,iview 官方自带组件实现点击小眼睛显示和隐藏密码

最新推荐文章于 2023-05-16 16:08:23 发布
最新推荐文章于 2023-05-16 16:08:23 发布
阅读量1k 收藏
点赞数 3
分类专栏： 前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57005594/article/details/120972394
版权

在一次开发中，产品提出需求，需要密码实现点击小眼睛显示和隐藏密码，我原来iview官方组件会自带这个属性，一看文档傻了。话不多说上代码。

   

 

 

其中用<Password>这个的时候切不可直接动态切换type为password或text,不然console控制成空收到以下报错：

 最后试了好几次还是用三目运算解决  

ps:内联样式，见笑了。哈哈

 

前端张小小
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
iview 隐藏显示该行密码
qq_42105170的博客
12-31 478
**通过小眼睛图标的睁眼闭眼实现对某一行的显示和隐藏 ** // 代码截取 // 为源数据的每一个元素添加一个显示属性‘pwdShow’ let len = this.tableData.length for(let i = 0 ; i <len ; i++) { this.tableData[i].pwdShow = false } //当点击该行的小眼睛时，拿到row的_index, 切换源数据的显示属性 thi
利用vue实现点击图片后隐藏图片
weixin_64980585的博客
03-21 337
利用vue实现点击图片后隐藏图片
Vue+iview 密码框输入显示隐藏控制
SophiaJZ的博客
11-06 2517
Vue+iview 密码框输入控制显示隐藏
Vue基于iview实现登录密码的显示与隐藏功能
10-15
主要介绍了Vue基于iview实现登录密码的显示与隐藏功能,本文通过截图实例代码说明给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
angular知识点--动态组件
fupo
09-11 397
相关api： ViewChild：一个属性装饰器，用来从模板视图中获取对应的元素，可以通过模板变量获取，获取时可以通过 read 属性设置查询的条件，就是说可以把此视图转为不同的实例 ViewContainerRef ：一个视图容器，可以在此上面创建、插入、删除组件等等 ComponentFactoryResolve：一个服务，动态加载组件的核心，这个服务可以将一个组件实例呈现到另一个组件视图上 实现动态加载组件，最重要的3个部分：viewchild，viewContainerRef , component
iview2----- 表单密码验证
记录美好生活
08-07 512
<Form ref="loginForm" :model="form" :rules="rules"> <FormItem label="新密码" prop="password"> <Input v-model="formItem.password" type="password"/> </FormItem> <Fo...
自定义input密码框眼睛显示隐藏（vue3+ts）
m0_69688393的博客
12-09 1883
自定义input密码框眼睛显示隐藏（vue3+ts）
基于vue、iview实现tree组件可拖拽、双击编辑
09-23
在这个场景下，我们将探讨如何利用Vue和IView实现一个具有拖拽和双击编辑功能的Tree组件。 首先，让我们了解一下`Tree`组件。在Web应用中，`Tree`组件通常用于展示层级关系的数据，如文件系统、组织结构等。IView中...
vue组件实现弹出框点击显示隐藏效果
08-27
"vue组件实现弹出框点击显示隐藏效果" 一、组件实现弹出框点击显示隐藏效果的重要性 在 Vue 应用程序中，弹出框是一种常用的交互方式，用于提示用户或显示重要信息。然而，在实现弹出框时，我们经常会遇到点击显示...
vue+elementUi 实现密码显示/隐藏+小图标变化功能
10-15
主要介绍了vue+elementUi 实现密码显示/隐藏+小图标变化功能,需本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
#vue# mousedown、mouseup事件，JS实现密码框小眼睛显示与隐藏
ZHENGCHUNJUN的博客
07-23 2337
需求： 密码框右侧小眼睛， 鼠标按下鼠标按键（左、右键均可）就显示出密码， 鼠标松开鼠标按键（左、右键均可）密码就隐藏 思路： （1）首先就是排版了（不细讲） 提供右侧小眼睛的一种做法： 把输入框和小眼睛放在一个大的div里面， 然后在div里面设置相对定位，在小眼睛里面设置绝对定位（子绝父相）， 然后right=40%左右，padding-top= 实际尺寸，就可以达到小眼睛在输入框的右侧显示 .signin-item { //父盒子 position: relative..
vue3-登录表单--输入密码框小眼睛切换问题
qq_52563030的博客
01-04 2084
el-input直接设置type值也可以实现密码显示隐藏，但是当点击重置按钮前密码为明文，重置后再次输入密码依然为明文状态。登录表单下方有一个重置按钮，点击重置按钮使密码和用户名清空，小眼睛重新回到隐藏密码状态。
vue项目中使用iview组件，禁止自动填充用户名和密码解决方法
codezha的博客
12-18 3631
之前的博客中提到过使用input标签时，禁止自动填充用户名和密码的解决方法（传送门），但此方法不适用于iview中的input组件，添加额外隐藏input框可以解决问题，代码如下： <Form> <div> <FormItem label="用户名" prop="verCode"> <!--禁止用户名自动填充-...
vue 点击小眼睛 显示/隐藏
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
12-03 2113
vue 点击小眼睛 显示/隐藏
iView组件动态控制表格列的显示与隐藏
qq_42772400的博客
05-16 731
根据当前登录用户角色动态控制是否展示业务经理查看状态列和大区经理查看状态列。列表中为金额的列，其值如果全为0则该列不展示。
vue iview table列表操作 render（显示和隐藏）
weixin_30474613的博客
07-27 6846
methods:{ init(){ let cloneData = Object.assign({},this.libraryList) let handles = [] this.columns1.map((item)=>{ ...
vue render 中如何控制显示隐藏，iview table 中控制columns 显示隐藏
weixin_36878452的博客
03-12 3506
uni+uView密码显示与隐藏的问题
bixuegu的博客
03-03 4627
关于uView的input密码显示与隐藏
vue3+ts父组件点击触发子组件弹窗显示隐藏
最新发布
01-17
在Vue3 + TypeScript中，可以通过使用`ref`和`emit`来实现父组件点击触发子组件弹窗的显示和隐藏。 首先，在父组件中，需要定义一个`ref`来控制子组件弹窗的显示和隐藏状态，并在按钮点击事件中触发该状态的改变。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端张小小

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值