当前位置：首页 > news >正文

element-plus中，vue3项目，el-input密码框禁止浏览器自动弹出浏览器历史密码提示框

news 来源：原创 2025/8/15 0:46:44

原代码（密码框是text框）：

<el-form-item label="用户名" :label-width="formLabelWidth" v-if="!localOrhuawei" prop="userName"><el-input v-model="formDialog.userName" /></el-form-item><el-form-item label="密码" :label-width="formLabelWidth" v-if="!localOrhuawei" prop="passWord"><el-input v-model="formDialog.passWord" /></el-form-item>

现加需求：el-input改为密码框，但要求el-input密码框禁止浏览器自动弹出浏览器历史密码提示框

<el-form-item label="用户名" :label-width="formLabelWidth" v-if="!localOrhuawei" prop="userName"><el-input v-model="formDialog.userName" /></el-form-item><el-form-item label="密码" :label-width="formLabelWidth" v-if="!localOrhuawei" prop="passWord"><el-input v-model="formDialog.passWord" show-password /></el-form-item>

效果：当密码有值时正常显示，当密码无值时就会自动弹出历史的用户密码列表弹框。

那如何不显示历史记录弹框呢？

想到通过v-if去控制显示密码框，代码如下：

<el-form-item label="密码" :label-width="formLabelWidth" v-if="!localOrhuawei" prop="passWord"><el-input  ref="passwordInput" v-model="formDialog.passWord" v-if="passwordType === 'password'" type="password" show-password autocomplete="new-password"/><el-input v-elseref="passwordInput"v-model="formDialog.passWord" type="text"autocomplete="off"/></el-form-item>import { reactive, ref, onMounted, watch,nextTick } from "vue";const passwordType = ref('text');
const passwordInput = ref();watch(() => formDialog.passWord,(nv,ov) => {if(!nv){passwordType.value = 'text'}else{passwordType.value = 'password'}}
);

效果：当清空值时，确实不会再弹出浏览器的历史记录列表了，但我发现当我输入一个数字后，input框就自动失焦了，但如果再次聚焦就可以连续输入了。

根本原因分析

当密码清空时，组件从密码类型切换到文本类型（重新渲染）
输入第一个字符时触发 v-model 更新，值不为空又切换回密码类型（再次重新渲染）
每次重新渲染都会导致焦点丢失。

解决方式：在监听值改变后，修改密码框类型后，直接聚焦即可解决问题；

watch(() => formDialog.passWord,(nv,ov) => {if(!nv){passwordType.value = 'text'}else{passwordType.value = 'password'}//切换input框类型后，重新聚焦nextTick(() => {passwordInput.value?.focus()})}
);

element-plus中，vue3项目，el-input密码框禁止浏览器自动弹出浏览器历史密码提示框

原代码（密码框是text框）： <el-form-item label"用户名" :label-width"formLabelWidth" v-if"!localOrhuawei" prop"userName"><el-input v-model"formDialog.userName" />&l…...

编程日记 2025/8/15 0:46:44

二叉树的遍历与构造

唉，好想回家，我想回家跟馒头酱玩，想老爸老妈。如果上天再给我一次选择的机会，我会选择当一只小动物，或者当棵大树也好，或者我希望自己不要有那么多多余的情绪，不要太被别人影响，开心…...

编程日记 2025/8/14 4:58:58

「Mac畅玩AIGC与多模态23」开发篇19 - Markdown 富文本输出工作流示例

一、概述本篇基于格式化文本整合的经验，进一步介绍如何通过 LLM 输出标准 Markdown 内容，并在前端正确渲染出标题、列表、加粗等富文本格式，提升展示效果与内容结构可读性。二、环境准备 macOS 系统Dify 平台已部署并可访问三、在 Dif…...

编程日记 2025/8/15 0:46:40

记录学习《手动学习深度学习》这本书的笔记（十）

因为最近在做《语音与语言理解综合处理》的实验，所以打算先看第14章：自然语言处理：预训练和第15章：自然语言处理：应用，之后再来看第13章：计算机视觉。第十四章：自然语言处理&#…...

编程日记 2025/8/15 0:46:38

Flowable7.x学习笔记（二十一）查看我的发起

前言 “查看我的发起”功能，就是将当前用户作为流程发起人启动的所有流程实例集中展示，帮助用户随时跟踪自己提交的业务请求的状态与历史，提升透明度与可控性。业务人员通常不知道流程引擎底层如何运转，只关心“我提交的报销/申请…...

编程日记 2025/8/15 0:46:36

【Bootstrap V4系列】学习入门教程之组件-折叠（Collapse）

Bootstrap V4系列学习入门教程之组件-折叠（Collapse） 折叠（Collapse）How it works一、Example二、Horizontal 水平的三、Multiple targets 多个目标四、Accordion example 手风琴示例折叠（Collapse） 通…...

编程日记 2025/8/15 15:19:57

ROS1和ROS2使用桥接工具通信

前提：主从机在同一局域网内，可以互相ping通我的两个设备其中一个无法连接wifi,ubuntu老生常谈的问题.....，获得新的技能：手机蓝牙提供网络，两个设备连接手机蓝牙就可以连接网络并且处于同一个局域网内。我的主机为…...

编程日记 2025/8/15 0:46:32

尤雨溪宣布：Vue 生态正式引入 AI

在前端开发领域，Vue 框架一直以其易用性和灵活性受到广大开发者的喜爱。而如今，Vue 生态在人工智能（AI）领域的应用上又迈出了重要的一步。尤雨溪近日宣布，Vue、Vite 和 Rolldown 的文档网站均已添加了llms.txt文件，这一举措旨在让大型语言模型（LLM）更方便地理解这些…...

编程日记 2025/8/15 0:46:30

分布式id的两大门派！时钟回拨问题的解决方案！

2.1 两大门派目前业界的分布式ID实现路径归结起来有两派：一派以雪花算法为代表，不强依赖DB能力，只使用分布式节点自身信息（时间戳节点ID序列号）的编码生成唯一序列，好处是去中心化、无单点风险&#xff1…...

编程日记 2025/8/15 0:46:28

QMK键盘固件配置详解

QMK键盘固件配置详解前言大家好！今天给大家带来QMK键盘固件配置的详细指南。如果你正在DIY机械键盘或者想要给自己的键盘刷固件，这篇文章绝对不容错过。QMK是目前最流行的开源键盘固件框架之一，它允许我们对键盘进行高度自定义。接下来&a…...

编程日记 2025/8/15 0:46:26

安装 Git # 更新包列表 sudo apt update# 安装 Git sudo apt install git 验证安装 # 检查 Git 版本 git --version 查看所有全局配置 git config --global --list 查看特定配置项 # 查看用户名配置 git config --global user.name# 查看邮箱配置 git config --global u…...

编程日记 2025/8/15 0:46:25

自由浮动时间和总浮动时间对比

一、自由浮动时间的定义在项目进度管理中，自由浮动时间（Free Float）是指在不推迟项目后续任务最早开始时间的前提下，一个任务能够延迟的时间长度。它是针对单个任务而言的，主要考虑该任务与其紧后任务之间的关系。 …...

编程日记 2025/8/15 0:46:23

2025.05.07-华为机考第二题200分

📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围OJ 02. 社区智能安防系统设计问题描述随着智慧社区建设的发展，LYA小区需要设计一套高效的安防监控系统。该小区布局可以用一棵二叉树来表示，树的每个节点代表一户居民家庭。为了…...

编程日记 2025/8/15 0:46:21

分布式架构详解

一、分布式架构的概念与设计目标 1. 基本概念分布式架构（Distributed Architecture）是分布式计算技术的应用和工具,指将一个复杂系统拆分为多个独立的组件（或服务），并将这些组件部署在不同物理节点（服务…...

编程日记 2025/8/15 0:46:19

码蹄集——平方根X、整除幸运数

目录 MT1075 平方根X MT1078 整除幸运数 MT1075 平方根X 知识点： 上取整：ceil；下取整：floor；四舍五入：round 判断是否为完全平方数的方法：利用sqrt函数结果为double，将其结果相乘&a…...

编程日记 2025/8/15 0:46:16

【MATLAB源码-第277期】基于matlab的AF中继系统仿真，AF和直传误码率对比、不同中继位置误码率对比、信道容量、中继功率分配以及终端概率。

操作环境： MATLAB 2022a 1、算法描述在AF（放大转发）中继通信系统中，信号的传输质量和效率受到多个因素的影响，理解这些因素对于系统的优化至关重要。AF中继通信的基本架构由发射端、中继节点和接收端组成。发射端负…...

编程日记 2025/8/15 0:46:15

ACE-Step - 20秒生成4分钟完整歌曲，音乐界的Stable Diffusion，支持50系显卡本地一键整合包下载

ACE-Step 是由ACE Studio与StepFun联合开发的音乐生成模型，被誉为“音乐界的Stable Diffusion”。该模型以其惊人的生成速度和多样化功能引发行业热议，支持19种语言，可在短短20秒内生成一首长达4分钟的完整音乐作品，效率比主流模型…...

编程日记 2025/8/15 15:20:07

007 Linux 开发工具（上）—— vim、解放sudo、gc+

🦄 个人主页: 小米里的大麦-CSDN博客 🎏 所属专栏: Linux_小米里的大麦的博客-CSDN博客 🎁 GitHub主页: 小米里的大麦的 GitHub ⚙️ 操作环境: Visual Studio 2022 文章目录 Linux 开发工具（上）Linux 编辑器 —— vim…...

编程日记 2025/8/15 0:46:11

React学习路线图-Gemini版

前端开发学习路线图 (针对编程新手，主攻 React 框架) 总原则：先打好地基，再盖楼。无论学习哪个框架，扎实的 HTML、CSS 和 JavaScript 基础是成功的关键。React 是基于 JavaScript 构建的，所以深入理解 JS 至关重要。…...

编程日记 2025/8/15 0:46:08

注意力（Attention）机制详解（附代码）

Attention机制是深度学习中的一种技术，特别是在自然语言处理（NLP）和计算机视觉领域中得到了广泛的应用。它的核心思想是模仿人类的注意力机制，即人类在处理信息时会集中注意力在某些关键部分上，而忽略其他不那么重要的…...

编程日记 2025/8/15 0:46:06

国内外Agent产品进展汇总

MCP（Model Context Protocol）是一个开放标准协议，旨在标准化应用程序向大型语言模型提供上下文信息的方式。通过集成MCP扩展，Agent可以访问和利用各种外部工具和服务，丰富了Agent的功能范围，使其能够执行更…...

编程日记 2025/8/15 0:46:05

AI Workflow

AI Workflow（人工智能工作流）指的是在构建、部署和管理AI模型与应用时所涉及的一系列步骤和流程。它将数据处理、模型训练、评估、部署及监控等环节有机结合起来，以实现高效、可重复的AI解决方案开发过程。以下是对AI Workflow核心组成部分及…...

编程日记 2025/8/15 0:46:03

MySQL OCP 认证限时免费活动 7 月 31 日前截止！！！

为庆祝 MySQL 数据库发布 30 周年，Oracle 官方推出限时福利：2025 年 4 月 20 日至 7 月 31 日期间，所有人均可免费报考 MySQL OCP（Oracle Certified Professional）认证考试。该认证验证持证者在 MySQL 数据库管理、优化…...

编程日记 2025/8/14 1:23:29

【无标题】MPC软件

MPC软件是一款先进的多变量预测控制解决方案专为复杂工业过程优化设计 **核心功能** 实时动态建模多变量协调控制滚动时域优化自适应调整策略干扰抑制鲁棒性强适用于时变系统 **技术优势** 基于模型预测算法提前计算最优控制序列处理输入输出约束保障系…...

编程日记 2025/8/15 0:45:59

【EasyPan】loadDataList方法及checkRootFilePid方法解析

【EasyPan】项目常见问题解答（自用&持续更新中…）汇总版一、loadDataList方法概览 /*** 文件列表加载接口* param session HTTP会话对象* param shareId 必须参数，分享ID（使用VerifyParam进行非空校验）* param …...

编程日记 2025/8/15 0:45:57

Java程序题案例分析

目录一、基础语法 1. 类与对象 2. 接口与抽象类二、面向对象语法 1. 继承与多态 2. 四种访问修饰符三、设计模式相关语法一、策略模式（接口回调实现） 1. 完整实现与解析二、工厂模式（静态工厂方法实现） 1. 完整实…...

编程日记 2025/8/15 0:45:55

【Lanqiao】数位翻转

题目： 思路： 写蓝桥不能不写dp，就像.... 题目数据给的不大，所以我们可以考虑一种 n*m 的做法，那么对于这种题目可以想到的是用dp来写，但是如何构造转移方程与状态是个难事由于这题对于任意一个数我们有两…...

编程日记 2025/8/14 18:24:59

基于QT(C++)实现（图形界面）校园导览系统

校园导览系统一、任务描述大学校园充满着忙忙碌碌的学生和老师们，但是有时候用户宝贵的时间会被复杂的道路和愈来愈多的建筑物的阻碍而浪费，为了不让同学们在自己的目的地的寻路过程中花费更多的时间，我们着手开发这样一款校园导览系统。…...

编程日记 2025/8/15 0:45:51

【C/C++】虚函数

📘 C 虚函数详解（Virtual Function） 📌 什么是虚函数？ 虚函数（Virtual Function） 是 C 中实现运行时多态（Runtime Polymorphism） 的核心机制。它允许派生类重写&…...

编程日记 2025/8/15 0:45:49

no main manifest attribute, in xxx.jar

1、问题： Spring Boot项目在idea中可以正常运行，但是运行Spring Boot生成的jar包，报错： 1、no main manifest attribute, in xxx.jar 2、xxx.jar中没有主清单属性 2、解决办法： 删除pom.xml中<configuration&g…...

编程日记 2025/8/15 0:45:47

使用 AI 如何高效解析视频内容？生成思维导图或分时段概括总结

一、前言 AI 发展的如此迅速，有人想通过 AI 提效对视频的解析，怎么做呢？ 豆包里面有 AI 视频总结的功能，可以解析bilibili网站上部分视频，如下图所示： 但有的视频解析时提示： 所以呢&#x…...

编程日记 2025/8/15 0:45:46

比较入站和出站防火墙规则

组织需要仔细配置防火墙规则，监控网络的传入和传出流量，从而最大限度降低遭受攻击的风险。在有效管理入站和出站防火墙规则前，了解入站与出站流量的区别至关重要。一、什么是入站流量？ 入站流量指的是并非源自网络内部&#xf…...

编程日记 2025/8/14 15:20:45

开放式耳机什么品牌的好用？性价比高的开放式耳机品牌推荐一下

这几年蓝牙耳机发展得很快，从最早的入耳式，到现在流行的开放式，选择越来越多。我自己是比较偏向佩戴舒适的类型，用过开放式之后就回不去了。它不堵耳、不压迫，戴着轻松不累，对我这种耳朵容易不适的人来说太…...

编程日记 2025/8/15 0:45:42

WPF之高级绑定技术

文章目录引言多重绑定（MultiBinding）基本概念实现自定义IMultiValueConverterMultiBinding在XAML中的应用示例使用StringFormat简化MultiBinding 优先级绑定（PriorityBinding）基本概念PriorityBinding示例实现PriorityBinding的后…...

编程日记 2025/8/15 0:45:39

k8s高可用集群，自动化更新证书脚本

#!/bin/bash # 切换到证书目录 cd /etc/kubernetes/pki || exit # 备份原有证书（重要！） sudo cp -r apiserver.crt apiserver.key \ apiserver-etcd-client.crt apiserver-etcd-client.key \ apiserver-kubelet-client…...

编程日记 2025/8/15 0:45:37

【Python 函数】

Python 中的函数（Function）是可重复使用的代码块，用于封装特定功能并提高代码复用性。以下是函数的核心知识点： 一、基础语法 1. 定义函数 def greet(name):"""打印问候语""" # 文档字符串&…...

编程日记 2025/8/14 5:31:55

Filecoin矿工资金管理指南：使用lotus-shed actor withdraw工具

Filecoin矿工资金管理指南：使用lotus-shed actor withdraw工具引言lotus-shed actor withdraw命令概述命令语法参数选项详解常见使用场景1. 提取全部可用余额2. 提取指定数量的FIL3. 通过受益人地址发送交易最佳实践资金安全管理操作流程优化常见问题与解决方案提…...

编程日记 2025/8/15 2:24:58

AI辅助DevOps与自动化测试：重构软件工程效率边界

随着AI技术渗透至软件开发生命周期，DevOps与自动化测试领域正经历颠覆性变革。本文系统性解析AI在需求分析、测试用例生成、部署决策、异常检测等环节的技术实现路径，结合微软Azure DevOps、Tesla自动驾驶测试等典型场景，探讨AI如何突破传统效…...

编程日记 2025/8/14 21:40:15

css内容省略——text-overflow: ellipsis

title: css内容省略 date: 2025-05-07 19:41:17 tags: css text-overflow: ellipsis text-overflow: ellipsis用于在文本溢出容器时显示省略号(…) 1.单行省略 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"&g…...

编程日记 2025/8/15 0:45:36

nginx性能优化与深度监控

一、性能调优方向 1. 系统层面优化内核参数调整 TCP队列与连接管理： net.core.somaxconn（最大连接队列长度，建议设为65535）net.ipv4.tcp_max_syn_backlog（SYN队列长度，建议65535）net.ipv4.tc…...

编程日记 2025/8/15 0:45:34

leetcode 70.爬楼梯（c++详细最全解法+补充知识）

目录题目解答过程补充哈希表知识哈希表基本特性常用成员函数基本用法实现代码 1.递归 2.循环遍历 3.哈希表题目假设你正在爬楼梯。需要 n 阶你才能到达楼顶。每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢？ 示例 1&#…...

编程日记 2025/8/15 0:45:32

护照阅读器简介

护照阅读器简介护照阅读器（Passport Reader）是一种专用设备，用于快速、准确地读取护照、身份证、签证等旅行证件的机读区（MRZ）和芯片（ePassport）信息，广泛应用于出入境管理、机场安…...

编程日记 2025/8/15 0:45:30

切片和边缘计算技术分析报告

切片和边缘计算技术分析报告一、引言随着 5G 通信技术的快速发展，网络切片和边缘计算技术逐渐成为通信领域的热点研究方向。网络切片技术通过将物理网络划分为多个逻辑上的虚拟网络，以满足不同业务场景对网络性能的差异化需求。边缘计算则将计算、存…...

编程日记 2025/8/14 18:54:44

vue3笔记（自存）

1. Vue3简介 2020年9月18日，Vue.js发布版3.0版本，代号：One Piece（n 经历了：4800次提交、40个RFC、600次PR、300贡献者官方发版地址：Release v3.0.0 One Piece vuejs/core 截止2023年10月，最…...

编程日记 2025/8/14 17:50:01

多线服务器具有什么优势

在当今数字化飞速发展的时代，多线服务器宛如一位低调的幕后英雄，默默为我们的网络世界提供着强大的支持。那么，多线服务器到底具有哪些令人瞩目的优势呢首先，多线服务器的最大优势之一就是网络访问的高速与稳定。想象一下&#x…...

编程日记 2025/8/15 0:45:28

Azure OpenAI 聊天功能全解析：Java 开发者指南

Azure OpenAI 聊天功能全解析：Java 开发者指南前言在当今人工智能飞速发展的时代，AI 驱动的文本生成技术正深刻改变着众多应用场景。Azure OpenAI 作为这一领域的重要参与者，由 ChatGPT 提供支持，不仅具备传统 OpenAI 的功能&…...

编程日记 2025/8/15 0:45:26

【情感关系】健全自我

一些看到后深有感触的文字请大家无论如何也不要相信这种：“童年/原生家庭经历决定人生走向”的论调。过去可以影响我们但是无法主宰我们，人是有主观能动意识的，认识自己的问题就是改变人生轨迹的第一步。后来我们会发现，对于…...

编程日记 2025/8/15 0:45:24

SLAM:单应矩阵，本质矩阵，基本矩阵详解和对应的c++实现

单应矩阵（Homography Matrix）单应矩阵（Homography Matrix）是计算机视觉中描述同一平面在不同视角下投影变换的核心工具，广泛应用于图像校正、拼接、虚拟广告牌替换等场景。以下从原理、求解方法和C++实现三方面展开详解：一、单应矩阵的数学原理定义与作用单应矩阵是…...

编程日记 2025/8/15 0:45:23

数据报（Datagram）与虚电路（Virtual Circuit）的区别

数据报（Datagram）与虚电路（Virtual Circuit）的区别数据报和虚电路是计算机网络中两种不同的通信方式，主要区别体现在连接方式、路由选择、可靠性、延迟和适用场景等方面。以下是它们的详细对比： 1. 基本…...

编程日记 2025/8/15 0:45:21

工业现场ModbusTCP转EtherNETIP网关引领生物现场领新浪潮

生物质发生器是一种能够产生、培养生物的设备。客户现场需要将生物发生器连接到罗克韦尔系统，但是二者协议无法直接通讯，需要通过ModbusTCP转Ethernet/IP网关将两者进行通讯连接，生物质发生器以其独特的工作原理和优势，使得生物的…...

编程日记 2025/8/14 19:24:06

根本原因分析

相关文章：