element-plus 使用密码输入框的自定义图标

news2024/11/25 17:20:08

在这里插入图片描述
在这里插入图片描述

				<el-input
                  v-model="ruleFormPassword.newPassword"
                  placeholder="请输入新密码"
                  :type="showPassword ? 'text' : 'password'"
                  :style="{ width: '360px' }"
                >
                  <template #suffix>
                    <span class="input_icon" @click="switchPassword">
                    //icon图标
                      <ScIcon v-if="showPassword" style="font-size: 16px" name="icon-mimaxianshi" />
                      <ScIcon v-else style="font-size: 16px" name="icon-mimayincang" />
                    </span>
                  </template>
                </el-input>

const showPassword = ref('text');


// 点击切换密码显示状态
const switchPassword = () => {
  showPassword.value = !showPassword.value;
};



.input_icon {
  cursor: pointer;
  width: 25px;
  height: 15px;
  padding-right: 6px;
  padding-bottom: 10px;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1267694.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JavaScript基础—函数、参数、返回值、作用域、变量、匿名函数、综合案例—转换时间,逻辑中断,转换为Boolean型

版本说明 当前版本号[20231129]。 版本修改说明20231126初版20231129完善部分内容 目录 文章目录 版本说明目录JavaScript 基础 - 第4天笔记函数声明和调用声明&#xff08;定义&#xff09;调用细节补充 参数形参和实参函数默认值 返回值作用域全局作用域局部作用域 变量全…

【论文阅读】基于隐蔽带宽的汽车控制网络鲁棒认证(三)

文章目录 第六章 通过认证帧定时实现VulCAN的非once同步6.1 问题陈述6.2 方法概述6.3 动机和缺点6.3.1 认证帧定时隐蔽通信6.3.2 VulCAN的梵蒂冈后端Nonce同步的应用 6.4 设计与实现6.4.1发送方6.4.2 接收方6.4.3 设计参数配置6.4.4 实现 6.5 安全注意事项6.5.1 系统模型6.5.2攻…

提升认知|为什么比尔盖茨在地上发现100美元也会捡?

哈喽呀&#xff0c;大家好&#xff0c;我是雷工&#xff01; 大概在高中时代&#xff0c;听到过这么一个段子&#xff0c;“说如果地上有100美元&#xff0c;比尔盖茨是不会去捡的&#xff0c;因为他弯腰去捡100美元浪费的时间足够其创造1000美元以上的价值。” 当时听完也觉得…

场景应用丨厦门水环境综合治理监测系统效果和作用

厦门&#xff0c;这座美丽的海滨城市&#xff0c;其水资源的状况与水环境的治理对于城市的生存与发展至关重要。近年来&#xff0c;厦门致力于打造生态宜居的城市环境&#xff0c;对城市生命线——水资源的保护与治理给予了极大的关注。其中&#xff0c;水资源综合治理监测系统…

贝锐向日葵与华为达成合作,启动鸿蒙原生应用开发

2023年11月24日&#xff0c;贝锐与华为携手举办鸿蒙原生应用开发启动仪式。贝锐创始人之一兼首席技术官张小峰先生、贝锐事业部总经理张海英女士共同出席了此次活动&#xff0c;并达成重大合作。贝锐旗下国民级远程控制品牌贝锐向日葵将以原生方式适配鸿蒙系统&#xff0c;成为…

《软件工程原理与实践》复习总结与习题——软件工程

软件生命周期 软件生命周期分为三个时期、八个阶段 软件定义时期&#xff1a; 1&#xff09;问题定义阶段&#xff1a;要解决什么问题 2&#xff09;可行性研究阶段&#xff1a;确定软件开发可行 3&#xff09;需求分析阶段&#xff1a;系统做什么 软件开发时期&#xff1a;…

查理·芒格之死对伯克希尔·哈撒韦公司意味着什么?

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 虽然查理芒格是伯克希尔哈撒韦公司首席执行官沃伦巴菲特的重要合作伙伴&#xff0c;但猛兽财经认为查理芒格的去世并不会对伯克希尔哈撒韦的正常运营产生太大的影响&#xff0c;因为该公司长期以来一直是由巴菲特主导的。 …

YouTube宣布要求披露AI生成的内容并添加标签

不知道大家在逛YouTube的时候有没有刷到过一些画面和人物看起来不太自然的视频。 没错&#xff0c;这些视频里面的画面和人物可能都是由AI生成的。 近日&#xff0c;YouTube 产品管理副总裁在官方博客文章上表示&#xff1a;生成式 AI 有潜力在 YouTube 上激发创造力&#xff…

vue2常见的语法糖

Vue.js 2 提供了一些语法糖&#xff08;syntactic sugar&#xff09;来简化常见的操作。以下是一些 Vue.js 2 中常用的语法糖&#xff1a; v-bind 简写&#xff1a; <!-- 完整语法 --> <a v-bind:href"url">Link</a><!-- 简写 --> <a :hr…

解决:ValueError: must have exactly one of create/read/write/append mode

解决&#xff1a;ValueError: must have exactly one of create/read/write/append mode 文章目录 解决&#xff1a;ValueError: must have exactly one of create/read/write/append mode背景报错问题报错翻译报错位置代码报错原因解决方法今天的分享就到此结束了 背景 在使用…

初学者如何理解​session、cookie、token的区别与联系?

session、cookie、token。 相信学过接口的朋友都特别熟悉了。 但是对我一个刚接触接口测试的小白来说&#xff0c;属实有点分不清楚。 下文就是我通过查阅各种资料总结出来的一点理解&#xff0c;不准确的地方还请各位指正。 &#xff08;文末送洗浴中心流程指南&#xff09…

如何在代码中启动与关闭ROS节点

在ROS开发中&#xff0c;节点的管理是很重要的一部分&#xff0c;其中有一些节点大部分时候用不到&#xff0c;只会在特定情况下被启动&#xff08;比如建图节点&#xff09;同时这些节点在使用完后还需要被关闭&#xff0c;因此我们就需要在程序中对这些节点进行启动与关闭的管…

“GIF转PNG轻松转换,图片批量处理神器,提升你的图像管理效率!“

你是否曾经为转换GIF格式到PNG格式而感到困扰&#xff1f;或者为处理大量图片而感到烦恼&#xff1f;现在&#xff0c;我们为你推荐一款全新的GIF到PNG转换工具&#xff0c;以及一款图片批量处理工具&#xff0c;让你的图像管理工作变得轻松愉快&#xff01; 首先&#xff0c;…

通过分析波形,透彻理解 UART 通信

UART是一种异步全双工串行通信协议&#xff0c;由 Tx 和 Rx 两根数据线组成&#xff0c;因为没有参考时钟信号&#xff0c;所以通信的双方必须约定串口波特率、数据位宽、奇偶校验位、停止位等配置参数&#xff0c;从而按照相同的速率进行通信。 异步通信以一个字符为传输单位…

「媒体邀约」三农,农业类媒体资源有哪些?

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 农业在我国国民经济中的地位是基础&#xff0c;农业是国民经济建设和发展的基础产业&#xff0c;因此围绕三农发展有很多的公司和企业&#xff0c;每年全国都有大大小小关于农业的展览&a…

C/C++内存管理(含C++中new和delete的使用)

文章目录 C/C内存管理&#xff08;含C中new和delete的使用&#xff09;1、C/C内存分布2、C语言中动态内存管理方式&#xff1a;malloc/calloc/realloc/free3、C动态内存管理3.1、new/delete操作内置类型3.2、new/delete操作自定义类型 4、operator new与operator delete函数5、…

天眼销:B端销冠的私藏宝藏!

在B端销售的业务场景下&#xff0c;获取客户的联系方式是绕不开的一个话题&#xff0c;并且也有很多销售有自己的经验。 怎么去获取企业客户呢&#xff1f;你肯定想我得找到企业基本的信息还有联系方式&#xff0c;这时候你可能会想到去知名的查查平台。然后你会发现&#xff…

tomcat调优配置

一. 设置账户进入管理页面 通过浏览器进入Tomcat7的管理模块页面&#xff1a;http://localhost:8080/manager/status 按照提示&#xff0c;在Tomcat7服务器指定的位置修改配置文件&#xff08;conf/tomcat-users.xml&#xff09;&#xff0c;增加相应的用户和角色配置标签 <…

亲子开衫外套 I 真的好温柔好有气质

分享适合宝宝和麻麻 一起穿的开衫外套 包芯纱拼貂毛 软糯亲肤不扎人 上身体验感非常不错 这种面料还不易起球 质感满满&#xff0c;单穿内搭都可&#xff01;

SRGAN 使用指南:将低分辨率图像转换为高分辨率图像

SRGAN、ESRGAN、Real-ESRGAN 使用指南 SRGAN网络结构优化目标 ESRGANReal-ESRGAN SRGAN 超分辨率&#xff1a;从低分辨率(LR)图像来估计其对应高分辨率(HR)图像的任务&#xff0c;被称作超分辨率(SR)。 SRGAN 图像超分辨率的深度学习模型&#xff0c;通过生成对抗网络&#x…