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

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

				<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;
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

视频智能分析国标GB28181云平台EasyCVR加密机授权异常是什么原因?

国标GB28181视频汇聚/视频云存储/集中存储/视频监控管理平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;实现视频资源的鉴权管理、按需调阅、全网分发、云存储、智能分析等。 近期有用户选择使用加密机进行EasyCVR授…

在线 SQL 模拟器SQL Fiddle使用简介

在线 SQL 模拟器SQL Fiddle使用简介 本文可作为“SQL语言与SQL在线实验工具的使用” https://blog.csdn.net/cnds123/article/details/115038700 一文的补充。 有时候&#xff0c;我们想去验证 SQL语句&#xff0c;却缺少数据库环境&#xff0c;那该怎么办呢&#xff1f; 这…

【css】调整图片样式-铅笔画-以及其它

[css]调整图片样式-铅笔画-以及其它 在这个网址下有很多实例&#xff0c;尝试了其中几个&#xff0c;成功实现的对半分。使用Micsoft&#xff0c;估计是不支持一些特性导致的。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UT…

微信公众号扫码授权登录源码 / PHP微信扫码关注公众号并授权登录源码

源码简介&#xff1a; 在当今的互联网时代&#xff0c;微信公众号已成为众多企业与用户之间进行交流和沟通的重要工具&#xff0c;其中包括用户的登录认证。通过关注公众号登录&#xff0c;不仅可以为公众号带来流量&#xff0c;还能够实现用户与公众号粉丝之间的一一对应关系…

ubuntu下训练自己的yolov5数据集

参考文档 yolov5-github yolov5-github-训练文档 csdn训练博客 一、配置环境 1.1 安装依赖包 前往清华源官方地址 选择适合自己的版本替换自己的源 # 备份源文件 sudo cp /etc/apt/sources.list /etc/apt/sources.list_bak # 修改源文件 # 更新 sudo apt update &&a…

深度解析Python复合赋值运算符

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 在Python中&#xff0c;复合赋值运算符是编程旅程中的得力助手。这些简洁而强大的运算符&#xff0c;如、-、*&#xff0c;不仅让代码更具可读性&#xff0c;而且提高了开发效率。从基础的数值操作到字符串和列表…

网络和Linux网络_6(应用层)HTTPS协议(加密解密+中间人攻击+证书)

目录 1. HTTPS协议介绍 1.1 加密解密和秘钥的概念 1. 2 为什么要加密 2. 对称加密和非对称加密 2.1 只使用对称加密 2.2 只使用非对称加密 2.3 双方都使用非对称加密 2.4 使用非对称加密对称加密 2.5 中间人攻击MITM 3. 证书的概念和HTTPS的通信方式 3.1 CA认证机构…

Redis -- 介绍

1、NoSQL: 指的是非关系型数据库&#xff0c;主要分成四大类&#xff1a;键值存储数据库、列存储数据库、文档型数据库、图形数据库。 2、什么是Redis&#xff1a; Redis是一种基于内存的数据库&#xff0c;一般用于做缓存的中间件。 3、Redis的主要的特点&#xff1a; 1、Rd…

Java LeetCode篇-深入了解关于单链表的经典解法

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 移除链表元素 1.1 使用双指针方法 2.0 反转链表 2.1 递归法 2.2 头插法 3.0 链表中倒数第 k 个节点 3.1 递归法 3.2 快慢指针 4.0 合并两个有序链表 4.1 递归法 …

三季度同道猎聘遇“瓶颈”,破局重点是中高端人才?

古往今来&#xff0c;人才一直是企业“争夺”的对象。随着新兴产业的快速冒头以及AI技术的崛起&#xff0c;新型人才以及中高端人才成为市场上的香饽饽&#xff0c;而这类人才的稀缺性让企业和招聘平台双方都很“头疼”。再加上外部环境的不确定性增加&#xff0c;职场人普遍求…

【工具使用-Audition】如何使用Auditon生成直流信号

一&#xff0c;简介 在工作的过程中需要生成直流信号&#xff0c;测试验证使用。本文主要介绍如何使用Audition生成指定长度的直流信号。 二&#xff0c;操作步骤 这里以Audition 2020&#xff0c;生成一个10s的-6db幅值的立体声文件为例进行介绍。 2.1 新建音频文件&#…

瑞云科技参与《数字孪生世界白皮书》编写,实时云渲染助力数字孪生

为了促进数字孪生技术的发展和应用&#xff0c;易知微与数字孪生世界企业联盟联合众多行业专家以及多家业内企业共同编写了《数字孪生世界白皮书&#xff08;2023&#xff09;》。该白皮书从数字孪生的综述、应用架构、核心技术、新型技术成果和重点行业应用等方面&#xff0c;…

Redis 入门和环境搭建

认识Redis Redis是一种NoSQL数据库&#xff0c;以键值对形式存储数据&#xff0c;支持多种数据结构&#xff0c;包括字符串、哈希、列表、集合、有序集合等&#xff0c;使其适用于多种应用场景。由于所有数据都存储在内存中&#xff0c;Redis的读写性能非常高。同时&#xff0…

一切为了应用!九章云极DataCanvas大模型系列成果重磅发布!

11月21日&#xff0c;「筑基赋能 智向未来」九章云极DataCanvas大模型系列成果发布会&#xff08;以下简称“发布会”&#xff09;在北京重磅召开&#xff0c;本次成果发布距离今年6月30日DataCanvas Alaya九章元识大模型公布仅4个多月&#xff0c;是九章云极DataCanvas公司大模…

vue发送请求携带token,拼接url地址下载文件

封装请求 &#xff0c;该请求为普通的get请求 该请求返回值为&#xff1a; 请求成功之后拼接URL地址下载文件 代码块 downTemplateRequest(activeKeys.value).then((res) > {let url http://47.169.168.99:18888/media/${res.data.name};var elink document.createElemen…

VT驱动开发

VT技术(编写一个VT框架) 1.VT技术介绍 1.技术介绍 1.VT技术 VT技术是Intel提供的虚拟化技术&#xff0c;全称为Intel Virtualization Technology。它是一套硬件和软件的解决方案&#xff0c;旨在增强虚拟化环境的性能、可靠性和安全性。VT技术允许在一台物理计算机上同时运…

单相直流电表和单相智能电表有哪些区别?

在众多的智能电表中&#xff0c;单相智能电表已成为家庭用电、工业用电等领域的重要组成部分。与此同时&#xff0c;单相直流电表也因其特性在某些特定场合受到关注。下面就来讲讲两者都有哪些区别&#xff0c;一起来看下吧&#xff01; 一、工作原理及性能差异 1.单相直流电表…

execl点击单元格跳转

通过点击单元格跳转到其它单元格并获取单元格文本对数据进行过滤 平时我们通过超链接可以实现单元格跳转&#xff0c;但是并不能对数据进行过滤 此时我们可以用execl的宏来实现 实现的效果如图: 完整代码下载链接

【同一局域网下】两台电脑之间互ping

两台电脑互ping 首先需要连接同一网咯关闭需要ping的电脑的防火墙 关闭防火墙步骤&#xff08;以win11系统为例&#xff09;&#xff1a; 设置 --> 隐私和安全性 --> Windows 安全中心 打开Windows安全中心 防火墙和网络保护 --> 选择正在使用的网络 关闭 ping其他…

汽车标定技术(十)--从CPU角度观察Overlay实现原理

目录 1.问题引入 2.功能概述 2.1 P1X 标定功能 2.2 MPC57xx标定功能 2.3 TC3xx标定功能 3.问题分析 3.1 英飞凌CPU子系统猜想 3.2 ARM内核CPU子系统分析 4.小结 1.问题引入 在分析瑞萨RH850-P1x系列、NXP S32K3系列和英飞凌TC3xx系列对标定测量功能的实现时&#xf…