vue 登陆禁止弹出保存密码框及禁止默认填充密码

news2025/1/9 15:05:36

在这里插入图片描述
在这里插入图片描述
οnfοcus=“this.removeAttribute(‘readonly’);” readonly
初始化为只读,当聚焦时去掉只读属性,只读可以防止浏览器自动填充。

-webkit-text-security:指定要使用的形状来代替文字的显示
none 无。
circle 圆圈。
disc 圆形。
square 正方形。

<el-form-item prop="password">
   <el-input
     :key="passwordType"
     ref="password"
     :type="passwordType"
     v-model="loginForm.password"
     placeholder="请输入密码"
     no-autocomplete
     name="password"
     tabindex="2"
     auto-complete="off"
     readonly
     onfocus="this.removeAttribute('readonly');"
     :class="pwdClass==true?'no-autofill-pwd':'no-auto2'"
     clearable
   />
   <span class="show-pwd" @click="showPwd">
     <svg-icon
       :icon-class="passwordType === 'text' ? 'eye' : 'eye-open'"
     />
   </span>
 </el-form-item>
data(){
	return{
      passwordType: "text",
      pwdClass:true,
	}
},
methods:{
	showPwd() {
      if (this.passwordType === "text") {
        this.passwordType = "";
        this.pwdClass = false
      } else {
        this.pwdClass = true
        this.passwordType = "text";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
}

.show-pwd {
  position: absolute;
  right: 10px;
  top: 3px;
  font-size: 16px;
  color: #138a7a;
  cursor: pointer;
  user-select: none;
}
.no-autofill-pwd {
  -webkit-text-security: disc !important;
}
.no-auto2 {
  -webkit-text-security: none !important;
}

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

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

相关文章

【Python学习】Python学习12-字典

目录 【Python学习】Python学习12-字典 前言创建语法访问列表中的值修改与新增字典删除字典元素Python字典内置函数&方法参考 文章所属专区 Python学习 前言 本章节主要说明Python的字典&#xff0c;是可变的容器&#xff0c;每个字典由键值对组成用冒号隔开&#xff0c;…

ArcMap实现多行标注

地图标注是地图的重要组成部分&#xff0c;也是地理信息的重要表达方式​。ArcMap的符号化系统为我们添加地图标注提供了方便&#xff0c;但是有时我们却需要添加多行标注&#xff0c;今天我们一起来探索一下ArcMap中两行标注的实现方式​。 首先&#xff0c;我们右击目标图层…

云流量回溯的工作原理及关键功能

云计算和网络技术的快速发展为企业提供了更灵活、高效的业务运营环境&#xff0c;同时也引发了一系列网络安全挑战。在这个背景下&#xff0c;云流量回溯成为网络安全领域的一个关键技术&#xff0c;为企业提供了对网络活动的深入洞察和实时响应的能力。 一、 云流量回溯的基本…

微信小程序中路由跳转的方式有哪些?区别?

面试官&#xff1a;说说微信小程序中路由跳转的方式有哪些&#xff1f;区别&#xff1f; 一、是什么 微信小程序拥有web网页和Application共同的特征&#xff0c;我们的页面都不是孤立存在的&#xff0c;而是通过和其他页面进行交互&#xff0c;来共同完成系统的功能 在微信小…

创意天堂:25个聚焦艺术、设计和创意的网站推荐

1、即时设计 说到即时设计&#xff0c;每个人都应该熟悉它。不久前&#xff0c;即时设计开启了世界上第一个可以使用人工智能完成UI设计草案的即时设计「即时AI」大规模的内部测试也给产品设计行业带来了新的发展方向。事实上&#xff0c;对于产品设计师来说&#xff0c;即时设…

自动化测试框架pytest系列之21个命令行参数介绍(二)

第一篇 &#xff1a; 自动化测试框架pytest系列之基础概念介绍(一)-CSDN博客 接上文 3.pytest功能介绍 3.1 第一条测试用例 首先 &#xff0c;你需要编写一个登录函数&#xff0c;主要是作为被测功能&#xff0c;同时编写一个测试脚本 &#xff0c;进行测试登录功能 。 登…

ROS建图之ROS标准REP-105(官方搬运翻译+个人理解)

REP-105 是一个由 Wim Meeussen 于 2010年10月27日 创建并维护的&#xff0c;名为 "Coordinate Frames for Mobile Platforms"&#xff08;移动平台的坐标系框架&#xff09;的 ROS Enhancement Proposal&#xff08;REP&#xff09;。ROS官方教程&#xff1a;REP 10…

C盘删除的文件怎么恢复?恢复文件,4个方法!

“请问一下在c盘中删除的文件还有机会恢复吗&#xff1f;保存了一些比较重要的工作文件&#xff0c;但是在清理电脑时误删了&#xff0c;怎么恢复呢&#xff1f;” C盘作为系统盘&#xff0c;保存了很多重要的文件。有时候电脑会默认将某些文件自动保存在c盘。那么&#xff0c;…

视频监控录像服务器(中心录像服务器)功能详细介绍

目 录 一、概述 &#xff08;一&#xff09;定义 &#xff08;二&#xff09;视频监控中心录像服务器 二、存储策略服务 &#xff08;一&#xff09;存储策略配置 1、 录入页面 2、 选择需要进行录像的视频 3、批量选择多个通道号 4、其他关键参数…

迅为RK3568开发板Android11/12/Linux编译驱动到内核

在平时的驱动开发中&#xff0c;经常需要在内核中配置某种功能&#xff0c;为了方便大家开发和学习&#xff0c;本小 节讲解如何在内核中添加驱动。具体的讲解原理讲解请参考本手册的驱动教程。 Android11 源码如果想要修改内核&#xff0c;可以运行以下命令进行修改: cd ke…

Python类型转换,数据类型转换函数大全 与 strip()函数介绍

Python类型转换&#xff0c;数据类型转换函数大全 虽然 Python 是弱类型编程语言&#xff0c;不需要像 Java 或 C 语言那样还要在使用变量前声明变量的类型&#xff0c;但在一些特定场景中&#xff0c;仍然需要用到类型转换。 比如说&#xff0c;我们想通过使用 print() 函数…

前端本地覆盖资源(local override)调试

文章目录 前言一、本地替换&#xff08;local override&#xff09;能干啥&#xff1f;二、以CSDN为例 实践一波替换图片资源 总结 前言 Chrome 65 中的开发者工具将包含以下新功能&#xff1a; 本地替换 新的无障碍工具 更改标签页 新的搜索引擎优化 (SEO) 和性能审核 Perfo…

rocketmq实现延迟消息

SpringBoot整合RocketMQ发送延时消息 springboot rocketmq 延迟消息 Windows下RocketMQ安装及可视化界面搭建 Java 客户端 RocketMQ延迟消息 项目背景 项目中有延时消息的需求&#xff0c;综合考量RocketMQ比较适合。 RocketMQ支持多维度的延迟级别 支持多种消息类型 基…

Go模板后端渲染时vue单页面冲突处理

go后端模版语法是通过 {{}} &#xff0c;vue也是通过双花括号来渲染的&#xff0c;如果使用go渲染vue的html页面的时候就会报错&#xff0c;因为分别不出来哪个是vue的&#xff0c;哪个是go的&#xff0c;既可以修改go的模板语法 template.New("output").Delims(&qu…

【大数据进阶第三阶段之Datax学习笔记】使用阿里云开源离线同步工具DataX 实现数据同步

【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax概述 【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax快速入门 【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax类图 【大数据进阶第三阶段之Datax学习笔记】使用…

新生儿成长的阳光之钙:补充注意事项指南

引言&#xff1a; 钙是新生儿骨骼发育不可或缺的重要元素&#xff0c;对于宝宝的生长发育起着至关重要的作用。本文将深入探讨钙的功能、补充时机&#xff0c;以及在给新生儿补充钙时应该注意的事项&#xff0c;为小天使们提供最贴心的呵护。 第一部分&#xff1a;钙的重要性与…

基于ssm社区老年人关怀服务系统论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本社区老年人关怀服务系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数…

Linux系统——测试端口连通性方法

目录 一、TCP端口连通性测试 1、ssh 2、telnet&#xff08;可能需要安装&#xff09; 3、curl 4、tcping&#xff08;需要安装&#xff09; 5、nc&#xff08;需要安装&#xff09; 6、nmap&#xff08;需要安装&#xff09; 二、UDP端口连通性测试 1、nc&#xff08;…

11Spring IoC注解式开发(上)(元注解/声明Bean的注解/注解的使用/负责实例化Bean的注解)

注解的存在主要是为了简化XML的配置。Spring6倡导全注解开发。 注解开发的优点:提高开发效率 注解开发的缺点:在一定程度上违背了OCP原则&#xff0c;使用注解的开发的前提是需求比较固定&#xff0c;变动较小。 1 注解的注解称为元注解 自定义一个注解: package com.sunspl…

保留几位小数的函数、全排列函数、​反斜杠的作用、二进制、八进制、十六进制的输入​、求三角形面积的三种方法、求平方根、N次方如何表示

保留几位小数的函数 方法一&#xff1a; 头文件 #include<iomanip> 格式 cout<<fixed<<setprecision(int n)<<a; 作用&#xff1a;把a保留三位小数 方法二&#xff1a; 还有一种方法&#xff0c;就是用C从C语言保留的printf()方法。 保留二位小数&a…