vue给input密码框设置眼睛睁开闭合对于密码显示与隐藏

news2024/11/17 16:18:58

<template>
  <div class="login-container">
    <el-input
      v-model="pwd"
      :type="type"
      class="pwd-input"
      placeholder="请输入密码"
    >
      <i
        slot="suffix"
        class="icon-style"
        :class="elIcon"
        autocomplete="auto"
        @click="flag = !flag"
      />
    </el-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: false
    };
  },
  computed: {
    type() {
      return this.flag ? "text" : "password";
    },
    elIcon() {
      return this.flag ? "el-icon-minus" : "el-icon-view";
    }
  }
};
</script>
<style>
.icon-style {
  margin-top: 8px;
  font-size: 18px;
}
.pwd-input {
  border: 1px solid #fff;
  width: 250px;
}
</style>

 参考文档

vue给input密码框设置眼睛睁开闭合对于密码显示与隐藏_input设置输入密码效果-CSDN博客

【饿了么UI】elementUI密码框图标实现睁眼和闭眼效果(阿里巴巴iconfront图标库vue项目本地引用)_element密码图标-CSDN博客

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

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

相关文章

springboot项目引入swagger

1.引入依赖 创建项目后&#xff0c;在 pom.xml 文件中引入 Swagger3 的相关依赖。回忆一下&#xff0c;我们集成 Swagger2 时&#xff0c;引入的依赖如下&#xff1a; <dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2&…

泛型(Generic)

文章目录 1. 泛型概述1.1 生活中的例子1.2 泛型的引入 2. 使用泛型举例2.1 集合中使用泛型2.1.1 举例2.1.2 练习 2.2 比较器中使用泛型2.2.1 举例2.2.2 练习 2.3 相关使用说明 3. 自定义泛型结构3.1 泛型的基础说明3.2 自定义泛型类或泛型接口3.2.1 说明3.2.2 举例3.2.3 练习 3…

HTML1:html基础

HTML 冯诺依曼体系结构 运算器 控制器 存储器 输入设备 输出设备 c/s(client客户端) 客户端架构软件 需要安装,更新麻烦,不跨平台 b/s(browser浏览器) 网页架构软件 无需安装,无需更新,可跨平台 浏览器 浏览器内核: 处理浏览器得到的各种资源 网页: 结构 HTML(超…

【Python的第三方库】flask

1. Flask是什么&#xff1f; 基于python的web后端开发轻量级框架&#xff1b; 基于MVT设计模式即Models,Views,Templates(html模板语言) 2.中文文档&#xff1a; https://dormousehole.readthedocs.io/en/2.1.2/index.html 3.依赖3个库&#xff1a; Jinja2 模版&#xff1…

dell灵越5439升级记录(2024年4月5日)

1、内存 5439为单个内存插槽&#xff0c;网上那些写两个的都是乱写的&#xff0c;型号是ddr3L。原来是4G&#xff0c;换成国产全新三星颗粒寨条&#xff0c;8g 1600hz。 淘宝价&#xff1a;47元。 2、CPU和显卡 如果和我一样在系统里面找不到GT740M的独显&#xff0c;那这一步…

渗透测试靶机----sec123

渗透测试靶机----sec123 复现打靶,这里先需要搭建好环境 这里还需要将内网中的网站映射到公网中,完全模拟实战渗透测试使用frp轻松实现 这里就搭建好靶机了,准备开始渗透工作 先使用这个网址,扫描看看这里通过扫描,发现这三个端口对应三个网页: http://107.151.243.222:8…

【C++】二叉搜索数

目录 一、二叉搜索树的概念 二、二叉搜索树的模拟实现 1、定义节点 2、构造二叉树 3、析构二叉树 ​4、拷贝二叉树 5、二叉树赋值 6、插入节点 &#x1f31f;【非递归方式】 &#x1f31f;【递归方式】 7、打印节点 8、搜索节点 &#x1f31f;【非递归方式】 &…

rt-thread的nfs如何实现软硬件对接

rt-thread&#xff08;下面简称rtt&#xff09;有一个封装好的的虚拟文件系统&#xff0c;提供了一套通用的io文件接口例如 open,write,read这些&#xff0c;从没看过rtt的代码也没用过&#xff0c;文件系统在刚毕业的时候只是用过fatfs但没去纠结过。今年1月份听同事说只需要打…

Java学习之面向对象三大特征

目录 继承 作用 实现 示例 instanceof 运算符 示例 要点 方法的重写(Override) 三个要点 示例 final关键字 作用 继承和组合 重载和重写的区别 Object类详解 基本特性 补充&#xff1a;IDEA部分快捷键 " "和equals()方法 示例 Super关键字 示例 …

redis进阶入门主从复制与哨兵集群

一、主从复制 1.1背景 一般来说&#xff0c;要将 Redis用于工程项目中&#xff0c;只使用一台 Redist是万万不能的&#xff0c;原因如下&#xff1a; 从结构上&#xff0c;单个 Redist服务器会发生单点故障&#xff0c;井且一台服务器需要处理所有的请求负載&#xff0c;压力…

重读Java设计模式: 适配器模式解析

引言 在软件开发中&#xff0c;经常会遇到不同接口之间的兼容性问题。当需要使用一个已有的类&#xff0c;但其接口与我们所需的不兼容时&#xff0c;我们可以通过适配器模式来解决这一问题。适配器模式是一种结构型设计模式&#xff0c;它允许接口不兼容的类之间进行合作。本…

使用Python转换图片中的颜色

说明&#xff1a;最近在看梵高的画册&#xff0c;我手上的这本画册&#xff08;《文森特梵高》杨建飞 主编&#xff09;书中说&#xff0c;梵高用的颜料里有不耐久的合成颜料&#xff0c;原本的紫色褪成了我们现在所看到的灰蓝色。于是我想&#xff0c;能不能用程序将画中的颜色…

Javascript 插值搜索-迭代与递归(Interpolation Search)

给定一个由 n 个均匀分布值 arr[] 组成的排序数组&#xff0c;编写一个函数来搜索数组中的特定元素 x。 线性搜索需要 O(n) 时间找到元素&#xff0c;跳转搜索需要 O(? n) 时间&#xff0c;二分搜索需要 O(log n) 时间。 插值搜索是对实例二分搜索的改进&#xff0c;…

AI绘画:使用ComfyUI结合LCM进行实时绘图:开启AI艺术创作新篇章

在数字艺术的世界里&#xff0c;ComfyUI和LCM&#xff08;Latent Contextual Modulation&#xff09;的结合为艺术家和设计师们提供了一个强大的实时绘图工具。LCM是一种先进的技术&#xff0c;它能够实时地将用户的输入和反馈融入到图像生成过程中&#xff0c;从而创造出动态变…

Web3 革命:揭示区块链技术的全新应用

随着数字化时代的不断发展&#xff0c;区块链技术作为一项颠覆性的创新正在改变着我们的世界。而在这一技术的进步中&#xff0c;Web3正逐渐崭露头角&#xff0c;为区块链技术的应用带来了全新的可能性。本文将探讨Web3革命所揭示的区块链技术全新应用&#xff0c;并展望其未来…

第1讲——预备知识

一、视觉SLAM十四讲在讲些啥 SLAM&#xff1a;Simultaneous Localization and Mapping 翻译&#xff1a;同时定位与地图构建 搭载特定传感器的主体&#xff0c;在没有环境先验信息的情况下&#xff0c;于运动过程中建立环境的模型&#xff0c;同时估计自己的运动。 当特定传感…

构建开源可观测平台

企业始终面临着确保 IT 基础设施和应用程序全年可用的压力。现代架构&#xff08;容器、混合云、SOA、微服务等&#xff09;的复杂性不断增长&#xff0c;产生大量难以管理的日志。我们需要智能应用程序性能管理 (APM) 和可观察性工具来实现卓越生产并满足可用性和正常运行时间…

基于SpringBoot+微信小程序的防诈骗平台

一、项目背景介绍&#xff1a; 社会背景随着互联网的高速发展&#xff0c;网络和手机的普及率也大大提高&#xff0c;这也衍生出一系列问题&#xff1a;用户信息泄露、不法分子电话诈骗等…现越来越多的老年人甚至年轻人经历过电信诈骗并被骗了大量金额。该产品正是基于这样的社…

揭秘SCQL:隐私计算的未来之路

1.SCQL使用/集成最佳实践 隐语隐私计算中SCQL&#xff08;Secure Collaborative Query Language&#xff09;的设计旨在提供一种便捷且安全的方式来处理多方参与下的隐私敏感数据查询与分析&#xff0c;而无需暴露原始数据给任何一方。以下是基于以上所记录信息的SCQL使用和集…

Linux文件IO(3):使用文件IO进行文件的打开、关闭、读写、定位等相关操作

目录 1. 文件IO的概念 2. 文件描述符概念 3. 函数介绍 3.1 文件IO-open函数 3.2 文件IO-close函数 3.3 文件IO-read函数 3.4 文件IO-write函数 3.5 文件IO-lseek函数 4. 代码练习 4.1 要求 4.2 具体实现代码 4.3 测试结果 5. 总结 1. 文件IO的概念 posix(可移植操作系统接…