Element UI 密码输入框--可切换显示隐藏,自定义图标

news2024/11/16 2:52:09

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

      <el-form-item prop="password">
        <el-input
          @keyup.enter.native="login"
          placeholder="密码"
          v-model="formData.password"
          :type="showPassword ? 'text' : 'password'"
        >
          <i slot="suffix" @click="switchPassword">
            <img
              v-if="showPassword"
              class="input_icon"
              src="@/assets/icons/password_show.png"
            />
            <img
              v-else
              class="input_icon"
              src="@/assets/icons/password_hide.png"
            />
          </i>
        </el-input>
      </el-form-item>
.input_icon {
  cursor: pointer;
  width: 24px;
  padding-top: 8px;
  padding-right: 6px;
}

data 中

      // 是否显示密码
      showPassword: false,

methods 中

    switchPassword() {
      this.showPassword = !this.showPassword;
    }

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

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

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

相关文章

策略模式在社会中的应用

文章目录 &#x1f31f; 如何将设计模式策略模式运用到社会当中&#x1f34a; 什么是策略模式&#x1f34a; 策略模式在社会中的应用&#x1f389; 1. 政治选举&#x1f389; 2. 商业竞争&#x1f389; 3. 教育培训 &#x1f34a; 策略模式的优缺点&#x1f389; 优点&#x1f…

SSM - Springboot - MyBatis-Plus 全栈体系(三十三)

第八章 项目实战 终极实战&#xff1a;SpringBoot 版微头条实战 一、微头条案例介绍 1. 微头条业务简介 用户功能 注册功能登录功能jwt 实现 头条新闻 新闻的分页浏览通过标题关键字搜索新闻查看新闻详情新闻的修改和删除 2. 技术栈介绍 2.1 前端技术栈 ES6 作为基础 J…

操作系统——信号量机制(王道视频p30、课本ch6)

1.记忆有技巧&#xff1a;PV操作 —— wait,signal ——肯定是先申请/等待&#xff0c;再释放 2.这里特别指出 记录型信号量就是 后面会重点研究的内容

软件测试肖sir__python之ui自动化实战和讲解(03)

python之ui自动化实战和讲解 一、讲解常见控件定位 链接&#xff1a;http://cms.duoceshi.cn/cms/manage/login.do 1、定位文本框&#xff0c;密码框&#xff0c;按钮 2. 输入 &#xff1a;send_keys()方法 3、点击 &#xff1a;click&#xff08;&#xff09; 方法 案例&…

uniapp在线预约到家按摩系统安装部署二次开发 可以搭建H5公众号+小程序+APP

后端Thinkphp框架开发。前端采用uni-app开发&#xff0c;适配多端&#xff08;小程序&#xff0b;公众号H5&#xff0b;APP&#xff09;源码全开源。 Nginx1.22.1Mysql5.6php7.3redis扩展 支持h5、公众号、小程序、APP&#xff0c;提供相关教程和详细功能文档&#xff01; 含开…

LeetCode算法刷题(python) Day41|09动态规划|理论基础、509. 斐波那契数、70. 爬楼梯、746. 使用最小花费爬楼梯

目录 动规五部曲LeetCode 509. 斐波那契数LeetCode 70. 爬楼梯LeetCode 746. 使用最小花费爬楼梯 动规五部曲 确定dp数组以及下标的含义确定递归公式dp数组如何初始化确定遍历顺序举例推导dp数组 LeetCode 509. 斐波那契数 力扣题目链接 本题最直观是用递归方法 class Sol…

GIL全局解释器锁

文章目录 GIL全局解释器锁一、引入&#xff1a;二、GIL介绍三、GIL与Lock四、GIL与多线程总结 GIL全局解释器锁 一、引入&#xff1a; 首先要明白&#xff0c;GIL并不是Python的一个特性&#xff0c;其实在我们通常所称呼的Python解释器&#xff0c;其实是CPython解释器&…

excel, 熟悉了一般应用的函数,为何还有必要学vba

背景&#xff1a; 1. win10, office 2016, hp Elitebook笔记本电脑 2. 统计数量时&#xff0c;在sheet &#xff08;工作表&#xff09;页面使用函数 sum通过类似 sum(c6:c8) 进行求和&#xff0c;其中C7未被计算在内&#xff0c;例子见图片或附件。即使使用 “数据透视表”…

基于QT的学生考勤系统

低价有偿-获取代码&#xff1a; 知识付费时代&#xff0c;低价有偿获取代码&#xff0c;请理解&#xff01; (1) 下载链接: 后补。 (2) 添加博主微信获取&#xff08;有偿&#xff09;,备注来源: mryang511688 项目描述 技术&#xff1a;C、QT等 摘要&#xff1a; 信息技术的迅…

【Andriod】Appium的不同版本(Appium GUI、Appium Desktop、Appium Server )的安装教程

文章目录 前言一.Appium GUI二.Appium Desktop三.Appium Server 命令行版本1.安装node.js2.安装Appium Server 前言 Appium 安装提供两2方式&#xff1a;桌面版和命令行版。其中桌面版又分为 Appium GUI 和 Appium Desktop。 建议&#xff1a;使用Appium Desktop 一.Appium …

ubuntu安装Anaconda

下载 Anaconda 进入 Ubuntu&#xff0c;自己新建下载路径&#xff0c;输入以下命令开始下载 注意&#xff0c;如果不是 x86_64&#xff0c;需要去镜像看对应的版本&#xff08;https://mirrors.bfsu.edu.cn/anaconda/archive/?CM&OA&#xff09; wget https://mirrors.…

【Java 进阶篇】深入了解 Bootstrap 表格和菜单

表格和菜单是网页设计中的重要组成部分&#xff0c;它们用于展示数据、导航和用户交互。Bootstrap 是一个强大的前端框架&#xff0c;提供了丰富的表格样式和菜单组件&#xff0c;使开发者能够轻松创建功能丰富的网页。在本文中&#xff0c;我们将深入探讨 Bootstrap 中表格和菜…

火热的“出海潮”背后,你还应该知道些什么?

点击文末“阅读原文”即可报名参会 剪辑、音频 / 卷圈 运营 / SandLiu 卷圈 监制 / 姝琦 封面 / 姝琦Midjourney 产品统筹 / bobo 场地支持 / 声湃轩北京录音间 联合制作 / RTE开发者社区 过去几十年&#xff0c;入华的科技企业“走进来”&#xff0c;加速了国内企业的数…

VM虚拟机创建centos7 64位系统提示此主机不支持64位客户机操作系统,此系统无法运行

VM虚拟机创建centos7 64位系统提示此主机不支持64位客户机操作系统,此系统无法运行 背景解决方案 背景 本身系统是window10 64位专业版系统&#xff0c;理论上不应该不支持64位的。 解决方案 最近安装docker开启了虚拟化hyper-v&#xff0c;关闭即可。 打开cmd&#xff08;…

Vue中的v-if和v-show指令有什么区别?

在Vue中,v-if和v-show是两个常用的指令,用于根据条件控制元素的显示和隐藏。虽然它们都可以根据条件来切换元素的可见性,但它们的实现和行为有一些区别。 1:编译时机: v-if是在编译阶段进行条件判断,如果条件为false,则在DOM中不会渲染该元素及其子元素;v-show则是在运…

MongoDB深度学习

MongoDB的简介 什么是MongoDB? MongoDB是一个基于分布式文件存储的数据库&#xff0c;由C语言编写。MongoDB是一个介于关系数据库和非关系数据库之间的产品&#xff0c;是非关系数据库当中功能最丰富&#xff0c;最像关系数据库的&#xff0c;它支持的数据结构非常松散&…

解码eBPF可观测性:eBPF如何改变我们所知的观测性

让我们来看看eBPF——这项技术到底是什么&#xff0c;它如何影响观测性&#xff0c;它与现有的观测性实践有什么区别&#xff0c;未来可能会发生什么变化&#xff1f; 在过去的两年里&#xff0c;云原生社区一直在热烈讨论eBPF。eBPF曾是KubeCon、eBPF Days和eBPF Summit的主题…

SystemVerilog Assertions应用指南 Chapter 1.17使用参数的SVA检验器

1.17使用参数的SVA检验器 SVA允许像 Verilog那样在检验器中使用参数( parameter)&#xff0c;这为创建可重用的属性提供了很大的灵活性。比如,两个信号间的延迟信息可以在检验器中用参数表示,那么这种检验器就可以在设计只有时序关系不同的情况中重用。例子1.2显示了个带延迟默…

【C++】一些C++11特性

C特性 1. 列表初始化1.1 {}初始化1.2 initializer_list 2. 声明2.1 auto2.2 typeid2.3 decltype2.4 nullptr 3. STL3.1 新容器3.2 新接口 4. 右值引用5. 移动构造与移动赋值6. lambda表达式7. 可变参数模板8. 包装器9. bind 1. 列表初始化 1.1 {}初始化 C11支持所有内置类型和…

Spring中自定义类型转换器

目录 一、什么是类型转换器 二、自定义类型转化器 2.1 实现Converter接口 2.2 在Spring中注册 三、自定义类型转换器中的细节 3.1 解决代码的耦合 3.2 注册标签id值必须唯一 ​3.3 Spring提供的日期转换器 一、什么是类型转换器 在Spring中类型转换器就是将配置文件中的字符串…