Element Plus el-select选择框失去焦点blur

正常情况下,可以使用 el-select 自带的方法 blur 事件来使select失去焦点
示例:
<el-select v-model="value" ref="selectRef"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select>
<script setup lang="ts">
import { ref } from 'vue';const selectRef = ref()//清除select聚焦
const clearSelectFoucs = ()=>{selectRef.value.blur()
}
</script>
某些特殊情况下,直接调用 blur 事件会不生效,可以采用以下方法:
<script setup lang="ts">
import { ref, nextTick } from 'vue';
const selectRef = ref()//方法一
const clearSelectFoucs = ()=>{nextTick(()=>{selectRef.value.blur()})
}//方法二
const clearSelectFoucs = ()=>{//先让选择框聚焦 再间隔执行失焦 blur 事件selectRef.value.focus()setTimeout(() => {selectRef.value.blur();}, 200);
}
</script>
相关文章:
Element Plus el-select选择框失去焦点blur
正常情况下,可以使用 el-select 自带的方法 blur 事件来使select失去焦点 示例: <el-select v-model"value" ref"selectRef"><el-optionv-for"item in options":key"item.value":label"item.la…...
Java File与IO流学习笔记
内存中存放的都是临时数据,但是在断电或者程序终止时都会丢失 而硬盘则可以长久存储数据,即使断电,程序终止,也不会丢失 File File是java.io.包下的类,File类的对象,用于代表当前操作系统的文件(可以是文…...
LabVIEW中PID控制的的高级功能
LabVIEW中PID控制的的高级功能 比例-积分-微分(PID)控制占当今控制和自动化应用的90%以上,主要是因为它是一种有效且简单的解决方案。虽然PID算法最初用于线性、时不变系统,但现在已经发展到控制具有复杂动力学的系统。在现实世界…...
STM32基于HAL库RT-Thread Demo测试
STM32基于HAL库RT-Thread Demo测试 🎈源码地址:https://github.com/RT-Thread/rt-thread/tree/master📌基于STM32CUBEMX中间件安装《基于 CubeMX 移植 RT-Thread Nano》📍环境搭建《使用 Env 创建 RT-Thread 项目工程》ǵ…...
萌新小白必做题(2)找素数
一.思路分析 先来看看素数的性质: 素数又称质数,是指除了1和本身外没有其它因数的自然数。素数有许多有趣的性质和应用,例如可以用于加密算法和数学证明等。比如2、3、5、7等都是素数,而4、6、8、9等则不是素数。素数的研究是数…...
《基于 Vue 组件库 的 Webpack5 配置》8.在生成打包文件之前清空 output(dist) 目录(两种方式)
方式一 如果 webpack 是 v5.20.0,直接使用属性 output.clean,配置如下: module.exports {//...output: {clean: true}, };方式二 如果使用较低版本,可以使用插件 clean-webpack-plugin: 先安装:npm…...
3、Kafka Broker
4.1 Kafka Broker 工作流程 4.1.1 Zookeeper 存储的 Kafka 信息 (1)启动 Zookeeper 客户端。 [hadoop102 zookeeper-3.5.7]$ bin/zkCli.sh(2)通过 ls 命令可以查看 kafka 相关信息。 [zk: localhost:2181(CONNECTED) 2] ls /kaf…...
数字孪生智慧建筑可视化系统,提高施工效率和建造质量
随着科技的不断进步和数字化的快速发展,数字孪生成为了建筑行业的一个重要的概念,被广泛应用于智能化建筑的开发与管理中。数字孪生是将现实世界的实体与数字世界的虚拟模型进行连接和同步,从而实现实时的数据交互和模拟仿真。数字孪生在建筑…...
SpringCloud: feign整合sentinel实现降级
一、加依赖: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache…...
List<LinkedHashMap<String, String>>类型的数据转换为Map<String, List<String>>类型数据
import java.util.*;public class Main {public static void main(String[] args) {// 示例数据:List<LinkedHashMap>List<LinkedHashMap<String, String>> keyParamList new ArrayList<>();LinkedHashMap<String, String> map1 ne…...
react 学习 —— 16、使用 ref 操作 DOM
什么时候使用 ref 操作 DOM? 有时你可能需要访问由 React 管理的 DOM 元素 —— 例如,让一个节点获得焦点、滚动到它或测量它的尺寸和位置。在 React 中没有内置的方法来做这些事情,所以你需要一个指向 DOM 节点的 ref 来实现。 怎么使用 r…...
Qt planeGame day10
Qt planeGame day10 Game基本框架 qt中没有现成的游戏框架可以用,我们需要自己搭框架首先创建一个QGame类作为框架,这个基本框架里面应该有如下功能:游戏初始化 void init(const QSize& siez,const QString& title);游戏反初始化(…...
贪吃蛇项目实践
游戏背景: 贪吃蛇是久负盛名的游戏,它也和俄罗斯⽅块,扫雷等游戏位列经典游戏的⾏列。 实现基本的功能: 贪吃蛇地图绘制 蛇吃⻝物的功能 (上、下、左、右⽅向键控制蛇的动作) 蛇撞墙死亡 蛇撞⾃⾝死亡 计…...
【C++】哈希应用——海量数据面试题
哈希应用——海量数据面试题 一、位图应用1、给定100亿个整数,设计算法找到只出现一次的整数?2、给两个文件,分别有100亿个整数,我们只有1G内存,如何找到两个文件交集?(1)用一个位图…...
CUDA学习笔记(五)GPU架构
本篇博文转载于https://www.cnblogs.com/1024incn/tag/CUDA/,仅用于学习。 GPU架构 SM(Streaming Multiprocessors)是GPU架构中非常重要的部分,GPU硬件的并行性就是由SM决定的。 以Fermi架构为例,其包含以下主要组成…...
逻辑漏洞详解
原理: 没有固定的概念,一般都是不符合常识的情况。比如任意用户注册,短信炸弹,占用资源,交易支付、密码修改、密码找回、越权修改、越权查询、突破限制。 根据实际业务逻辑进行比对,购物的可以根据数量&a…...
MySQL——八、MySQL索引视图
MySQL 一、视图1、什么是视图2、为什么需要视图3、视图的作用和优点4、创建视图5、视图使用规则6、修改视图7、删除视图 二、索引1、什么是索引2、索引优缺点3、索引分类4、索引的设计原则5、创建索引5.1 创建表是创建索引5.2 create index5.3 ALTER TABLE 6、删除索引7、MySQL…...
力扣100097. 合法分组的最少组数(哈希+贪心)
题目描述: 给你一个长度为 n 下标从 0 开始的整数数组 nums 。 我们想将下标进行分组,使得 [0, n - 1] 内所有下标 i 都 恰好 被分到其中一组。 如果以下条件成立,我们说这个分组方案是合法的: 对于每个组 g ,同一…...
uniapp map地图实现marker聚合点,并点击marker触发事件
1.uniapp官方文档说明 2.关键代码片段 // 仅调用初始化,才会触发 on.("markerClusterCreate", (e) > {})this._mapContext.initMarkerCluster({enableDefaultStyle: false, // 是否使用默认样式zoomOnClick: true, // 点击聚合的点,是否…...
【Mysql】Mysql中的B+树索引(六)
概述 从上一章节我们了解到InnoDB 的数据页都是由7个部分组成,然后各个数据页之间可以组成一个双向链表 ,而每个数据页中的记录会按照主键值从小到大的顺序组成一个单向链表 ,每个数据页都会为存储在它里边儿的记录生成一个页目录 ÿ…...
Landsat 8数据下载全攻略:地理空间数据云保姆级教程(含注册到下载避坑指南)
Landsat 8数据获取实战手册:从零开始掌握遥感数据下载核心技巧 第一次接触遥感数据分析时,最让人头疼的往往不是复杂的算法或专业软件操作,而是连基础数据都找不到下载入口。作为NASA陆地卫星计划的最新成员,Landsat 8以其30米分辨…...
胡桃工具箱:让你的原神游戏体验提升300%的智能助手终极指南
胡桃工具箱:让你的原神游戏体验提升300%的智能助手终极指南 【免费下载链接】Snap.Hutao 实用的开源多功能原神工具箱 🧰 / Multifunctional Open-Source Genshin Impact Toolkit 🧰 项目地址: https://gitcode.com/GitHub_Trending/sn/Sna…...
从Vue2到Vue3,你的弹窗组件升级指南:以V3Popup为例详解Composition API与Teleport
Vue3弹窗组件深度重构:从Options API到Composition API的实战演进 在Vue生态中,弹窗组件一直是高频使用的交互元素。随着Vue3的全面普及,许多团队正面临从Vue2到Vue3的技术栈迁移挑战。本文将聚焦弹窗组件的现代化重构路径,通过对…...
软件过程的改进模型与实施步骤
软件过程的改进模型与实施步骤 在快速发展的信息技术领域,软件过程改进是提升开发效率、保证产品质量的关键手段。无论是传统的瀑布模型还是敏捷开发方法,都需要通过科学的改进模型来优化流程。常见的改进框架如CMMI(能力成熟度模型集成&…...
嵌入式开发找50W+工作必备的技能栈
嵌入式系统开发是一项横跨硬件、软件、通信和行业规范的综合性工程。一名合格的嵌入式工程师,不仅需要扎实的底层编程能力,还要理解电子电路、实时操作系统以及各种工业通信协议,甚至需要熟悉特定领域的功能安全标准。下面,我们系…...
JPEGView:为什么这个开源图像查看器能成为专业摄影师的终极选择?
JPEGView:为什么这个开源图像查看器能成为专业摄影师的终极选择? 【免费下载链接】jpegview Fork of JPEGView by David Kleiner - fast and highly configurable viewer/editor for JPEG, BMP, PNG, WEBP, TGA, GIF and TIFF images with a minimal GUI…...
GPLT天梯赛L2-L3难题复盘:从‘三点共线’超时到‘胖达的山头’差分,我的C++踩坑与优化实录
GPLT天梯赛L2-L3难题复盘:从‘三点共线’超时到‘胖达的山头’差分,我的C踩坑与优化实录 参加算法竞赛就像在迷宫中寻找出口,每一次错误的转弯都是通往正确答案的必经之路。去年GPLT天梯赛中,我在L2和L3级别的题目上经历了从超时崩…...
透视校正插值:三角形重心坐标在3D渲染中的关键应用
1. 为什么我们需要透视校正插值 想象一下你正在玩一款3D游戏,角色走过一片铺满砖块的地面。如果仔细观察,会发现靠近屏幕下方的砖块看起来比上方的更大——这就是透视效果在起作用。当3D场景通过摄像机投影到2D屏幕上时,距离摄像机更近的物体…...
【排序算法进阶指南】希尔排序:从“大步跳跃”到“精准归位”的工程实践
1. 为什么希尔排序是大规模数据处理的秘密武器 第一次接触希尔排序时,我正面临一个棘手的问题:服务器上堆积的2TB日志文件需要按时间戳排序。尝试用直接插入排序跑了半小时后,进度条才走了3%——这让我意识到需要更高效的算法。希尔排序的独特…...
别再到处找安装包了!手把手教你从ST官网正确下载STM32CubeMX任意历史版本
从ST官网精准获取STM32CubeMX历史版本的完整指南 作为嵌入式开发者,我们经常需要回退到某个特定的STM32CubeMX版本来兼容旧项目。你可能遇到过这样的困境:官网只提供最新版本下载,而网盘资源又存在安全风险。本文将彻底解决这个痛点ÿ…...
